Home  >  Article  >  Web Front-end  >  How to use animate.css

How to use animate.css

coldplay.xixi
coldplay.xixiOriginal
2021-03-25 15:50:196424browse

How to use animate.css: First put the animate css file in the folder; then add the animate file at the head of the html, and add code on the tags that need animation; finally add a infinite can play the animation in a loop.

How to use animate.css

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to use animate.css:

1. Put the animate css file and an html file in the folder.

How to use animate.css

#2. Add our animate file at the head of the html.

How to use animate.css

3. Add class="animated bounce delay-3s" to the label that needs animation. After a delay of 3 seconds, the bounce animation in animate will be played.

How to use animate.css

#4. Add an infinite in the middle to play the animation in a loop.

How to use animate.css

5. We can also add the class style ourselves, set the playback speed to 5 seconds, delay 2 seconds, loop playback, and write the definition directly in front of the label class That's it.

How to use animate.css

#6. If you want to set the number of plays, you can change infinite to 2, which means it will be played twice.

How to use animate.css

#7. When you open it in the browser, you can see the text jumping animation. You can use other animations in the same way. You only need to modify the animation name.

How to use animate.css

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of How to use animate.css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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
Previous article:How to set css fontNext article:How to set css font