How to Make CSS3 Animations Stay After Completion?

Susan Sarandon
Release: 2024-10-31 08:34:01
Original
172 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!