Introducing Animate.css, a simple and easy-to-use animation library-CSS Tutorial-php.cn

Introducing Animate.css, a simple and easy-to-use animation library

零下一度

Release： 2017-05-02 14:19:24

Original

1977 people have browsed it

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.

Introducing Animate.css, a simple and easy-to-use animation library

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

Copy after login

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>

Copy after login

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>

Copy after login

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.

Introducing Animate.css, a simple and easy-to-use animation library

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

Copy after login

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>

Copy after login

<!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>

Copy after login

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!