参见英文答案 >
Maintaining the final state at end of a CSS3 animation2个答案给定以下CSS3动画….
<style type="text/css" media="screen"> .drop_Box { -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes drop { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(100px); } } </style> <div class="drop_Box"> Hello world </div>
Hello World文本按预期下降100px动画。然而，在动画结束时，它跳回到其原始位置。
显然这在CSSland是有道理的。动画已应用，并且不再对元素起作用，因此原始样式生效。对我来说似乎有些奇怪 – 但肯定如果一个动画的元素到位，那么人们会期望放置持久？
有没有什么办法使结束位置“粘性”，而不必诉诸于Javascript，在类的名称或样式标记到动画结束时的元素，以修复其改变的属性？我知道transitions persist，但是对于我有问题的动画(示例是仅用于演示目的)转换不提供所需的控制级别。没有这一点，似乎复杂的动画只能用于循环过程，其中元素结束其原始状态。
解决方法
如果在类中定义结束状态，那么它应该在示例中执行所需的操作：
.drop_Box { -webkit-transform: translateY(100px); -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; }
但是如果你的动画是事件驱动反正你可能最终不得不使用一点JavaScript。最简单的方法是使添加具有结束状态的类是什么触发动画开始。
– 编辑
有关在April 2012 WD中添加的animation-fill-mode属性的信息，请参阅dino’s answer。
