How to Make CSS3 Animations Stay After Completion?

Preserving the End Result of CSS3 Animations

In your CSS animation, the "Hello World" text drops down as expected, but it returns to its original position upon completion. This behavior is natural, as the animation ends and the original styles resume. However, you may prefer to have the end result persist.

To achieve this, you can leverage the -webkit-animation-fill-mode property. Introduced in WebKit and implemented in iOS 4 and Safari 5, this property allows you to choose whether the animation persists (either at the end or beginning) or resets to its original state after completion.

By setting -webkit-animation-fill-mode to forwards, the end state of the animation will be preserved. This allows you to retain the altered properties, even after the animation has completed. Here's the updated 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>

With this, the "Hello World" text will drop down 100px and remain there indefinitely, retaining the end result of the animation without requiring additional JavaScript or CSS transitions.

The above is the detailed content of How to Make CSS3 Animations Stay After Completion?. For more information, please follow other related articles on the PHP Chinese website!