如何让CSS3动画完成后保持不变？

保留 CSS3 动画的最终结果

在 CSS 动画中，“Hello World”文本按预期下降，但它返回完成后恢复到原来的位置。这种行为是很自然的，因为动画结束并且原始样式恢复。但是，您可能更愿意保留最终结果。

要实现此目的，您可以利用 -webkit-animation-fill-mode 属性。在 WebKit 中引入并在 iOS 4 和 Safari 5 中实现，此属性允许您选择动画是否持续（在结束或开始时）或在完成后重置为原始状态。

通过设置 -webkit-将animation-fill-mode设置为forwards，动画的结束状态将被保留。这允许您保留更改的属性，即使在动画完成后也是如此。这是更新后的 CSS：

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}</code>

这样，“Hello World”文本将下降 100 像素并无限期地保留在那里，保留动画的最终结果，而不需要额外的 JavaScript 或 CSS 过渡。

以上是如何让CSS3动画完成后保持不变？的详细内容。更多信息请关注PHP中文网其他相关文章！