How to Make CSS3 Animations in WebKit Persist Their End State?

Webkit CSS Animation Persisting the End State

In CSS3 animations, you can encounter an issue where the animated element returns to its original state after the animation completes. This can be attributed to the fact that animations are temporary transformations applied to an element, and once they finish, the element's original styles take over.

However, there exists a workaround that allows you to make the end position "sticky." Using the -webkit-animation-fill-mode property, you can persist the end state of an animation.

For example, consider the following CSS animation:

<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>

After the animation, the element would revert to its original position. To prevent this, you can add the following line to the CSS:

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

With this addition, the element will maintain its translated position (100px) even after the animation completes. This property was introduced in WebKit and is supported in iOS 4 and Safari 5 and later.

The above is the detailed content of How to Make CSS3 Animations in WebKit Persist Their End State?. For more information, please follow other related articles on the PHP Chinese website!