如何使 CSS3 动画停留在最后一帧？

在最后一帧停止 CSS3 动画

要防止动画元素在动画完成后恢复到其原始状态，您可以使用动画填充模式属性。此属性控制动画结束后元素的行为。

解决方案：

要在最后一帧 (100%) 停止动画，请指定该值转发动画填充模式属性。这将指示浏览器在动画完成后保持动画的最终状态。

这是添加了forwards值的更新后的CSS代码：

@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); }
}

.animated-element {
  animation: colorchange 1s infinite;
  animation-fill-mode: forwards;
  /* Optional: remove the element after the animation finishes */
  transition: 0.5s ease opacity;
  animation-end: hide-element;
}

@keyframes hide-element {
  100% {
    opacity: 0;
  }
}

通过使用animation-fill- mode：前进，动画完成后元素将保持其变换状态。此外，可选的 CSS 过渡和动画结束关键帧可用于在动画完成后淡出或删除元素。

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