How Can You Keep an Element in its Animated End State with CSS?

Maintaining the Animated State with CSS

In CSS3, animations add dynamic movement to elements, but a common issue arises when the animation returns to its initial state upon completion. This can be problematic for scenarios where the desired outcome is a permanent change.

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>

This animation drops an element 100px downward. However, after the animation completes, the element reverts to its original position.

Solution: Using -webkit-animation-fill-mode

To maintain the end state of the animation, CSS provides the -webkit-animation-fill-mode property. This property controls what happens to the element before and after the animation occurs. By setting it to forwards, the element remains in its end state after the animation concludes:

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

This approach ensures that the animated element retains its modified position even after the animation has finished. It allows for seamless and persistent changes to the element's appearance, making complex animations more valuable beyond circular processes.

The above is the detailed content of How Can You Keep an Element in its Animated End State with CSS?. For more information, please follow other related articles on the PHP Chinese website!