如何让 CSS3 动画停止在最后一帧？

在最后一帧停止 CSS3 动画

使用 CSS3 动画时，可能需要在最后一帧永久冻结动画它的最后一帧。这对于将元素移出屏幕的动画特别有用。

实现此目的的一种方法是利用animation-fill-mode 属性。当设置为向前时，即使在动画周期完成后，它也确保元素保留其最后一个动画帧的外观。

例如，在给定的动画中，关键帧名为“colorchange”：

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

要在最后一帧永久停止动画，请添加animation-fill-mode:forwards；到动画元素：

.animated-element {
  animation-name: colorchange;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

这将确保动画完成后，元素保持缩放为 0.5、旋转 5 度，并平移到 100% 关键帧中指定的最终位置。

以上是如何让 CSS3 动画停止在最后一帧？的详细内容。更多信息请关注PHP中文网其他相关文章！