Home >Web Front-end >CSS Tutorial >Introducing Animate.css, a simple and easy-to-use animation library
Introducing Animate.css, a simple and easy-to-use animation library
- 零下一度Original
- 2017-05-02 14:19:242039browse
A beautiful and cool webpage is inseparable from the embellishment of animation effects. There are many animation libraries to choose from now. Here I will introduce a simple and easy-to-use animation library Animate.css.
animate.css online effect uses an online web page to demonstrate all animation effects. We only need to select an effect name in the drop-down list to view its actual animation effect. You can go directly to this website to test these animation effects.
After the test is completed, we can add it to our project. We can use bower or npm to download.
bower install animate.css --savenpm install animate.css --save
You can also use CDNJS and then reference the animate.css file in the page.
<head> <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>
Finally, add the animated class and the corresponding animation class to the element you want to have animation effects. For example, a rebound animation effect is applied below. You can save the code directly as an HTML file and then view the effect in the browser.
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>动画效果</title>
<link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>In this way, this animation library has been introduced. If you have your own project, you can consider giving some elements animation effects to make the page more lively.
A beautiful and cool webpage is inseparable from the embellishment of animation effects. There are many animation libraries to choose from now. Here I will introduce a simple and easy-to-use animation library Animate.css.
animate.css online effect uses an online web page to demonstrate all animation effects. We only need to select an effect name in the drop-down list to view its actual animation effect. You can go directly to this website to test these animation effects.
After the test is completed, we can add it to our project. We can use bower or npm to download.
bower install animate.css --savenpm install animate.css --save
You can also use CDNJS and then reference the animate.css file in the page.
<head> <link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head>
Finally, add the animated class and the corresponding animation class to the element you want to have animation effects. For example, a rebound animation effect is applied below. You can save the code directly as an HTML file and then view the effect in the browser.
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>动画效果</title>
<link rel="stylesheet" href="www.php.cn/ajax/libs/animate.css/3.5.2/animate.min.css"></head><body><h1 class="animated bounce">弹弹弹！</h1></body></html>In this way, this animation library has been introduced. If you have your own project, you can consider giving some elements animation effects to make the page more lively.
The above is the detailed content of Introducing Animate.css, a simple and easy-to-use animation library. For more information, please follow other related articles on the PHP Chinese website!