CSS3 Animation：如何在动画播放完后停止在最后的状态
在CSS3中，要让动画在最后一帧停止，可以使用animation-fill-mode属性，并将其设置为forwards。这样，动画完成后，元素会保持最后一帧的状态。
下面是一个简单的例子：
@keyframes example {
from { opacity: 0; }
to { opacity: 1; }
}
.animated-element {
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards; /* 保留动画结束状态 */
}HTML部分：
<div class="animated-element">我会在动画完成后停留在完成状态。</div>在这个例子中，.animated-element将执行一个淡入效果，当动画完成后，它会保持不透明的状态，即最后一帧的状态。
评论已关闭