Home > Article > Web Front-end > 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:241987browse

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.

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

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>

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

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：What do filters in CSS mean?Next article：What do filters in CSS mean?

See more

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

Related articles