如何使 WebKit 中的 CSS3 动画保持最终状态？

Webkit CSS 动画持久化结束状态

在 CSS3 动画中，您可能会遇到动画元素在结束后返回其原始状态的问题动画完成。这可以归因于这样一个事实：动画是应用于元素的临时转换，一旦完成，元素的原始样式就会接管。

但是，存在一种解决方法，可以让您确定结束位置“黏。”使用 -webkit-animation-fill-mode 属性，您可以保留动画的结束状态。

例如，考虑以下 CSS 动画：

<code class="css">.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);
  }

}</code>

动画结束后，元素将恢复到原来的位置。为了防止这种情况，您可以将以下行添加到 CSS：

<code class="css">-webkit-animation-fill-mode: forwards;</code>

添加此内容后，即使动画完成后，元素也将保持其平移位置 (100px)。该属性是在 WebKit 中引入的，并在 iOS 4 和 Safari 5 及更高版本中受支持。

以上是如何使 WebKit 中的 CSS3 动画保持最终状态？的详细内容。更多信息请关注PHP中文网其他相关文章！