Can solve 80% of the needs of 10 CSS animation library!

preface

Like it, make it a habit

1.Animista

Description :** Generate CSS animation online

Animista is an online animation generator and animation library that provides us with the following features

In the process of learning the web front end, it is inevitable to encounter a lot of problems, these problems may bother you for a long time, so I have a Web development learning exchange group (545667817), which are digging gold friends, and sorted out a most comprehensive front-end learning materials, from the most basic HTML+CSS+JS to mobile HTML5 project actual combat learning materials have sorted out, want to learn can apply to join, we learn from each other, communicate with each other, common progress, share different learning materials every day!

1. Choose different animations

We can select the animation type we want (e.g., entrance/exist), and in addition to selecting an animation (e.g., scale-in), we can even select different presentation effects for that animation (e.g., scale-in-Right).

2. Custom

Animista also provides a feature that allows us to customize certain parts of the animation, for example

• duration
• delay
• direction

Even better, you can select the object to animate:

3. Generate CSS code

After selecting the animation that suits your needs, we can get the code directly from the website, or even compress it:

4. Download the code

Another useful feature is that you can bookmark your favorite animations and download them together, or you can choose to copy the code of those animations together.

2. Animate CSS

Web site address: daneden. Making. IO/anim…

** Complete CSS3 animation library

I think most people know this without introduction. The Animate CSS is probably one of the best known animation libraries. Here is a brief description of its use:

Use 1.

First, you have to add the class Animated on the always needed animation element, and then the name of the animation.

<div class="animated slideInLeft"></div>
Copy the code

If we want the animation to last forever, we can add infinite class.

Add animations with JS:

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
Copy the code

Add animations via JQ:

$(".my-element").addClass("animated slideInLeft")
Copy the code

2. Other functions

The Animate CSS provides basic classes to control the delay and speed of animations.

delay

You can add the Delay class to delay the playback of the animation.

<div class="animated slideInLeft delay-{1-5}"><div>
Copy the code

speed

We can also control the animation speed by adding one of the classes listed below.

<div class="animated slideInLeft slow|slower|fast|faster"><div>
Copy the code

3. Vivify

Website address: vivify.mkcreative.cz/

A more rich CSS animation library

Vivify is an animation library that can be seen as an enhanced version of the Animate CSS. They work exactly the same, with most of the Animate CSS classes and some extensions.

<div class="vivify slideInLeft"></div>
Copy the code

Using JS mode:

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')
Copy the code

Using JQ mode:

$(".my-element").addClass("vivify slideInLeft")
Copy the code

Like Animate CSS, Vivify provides classes to control the duration and delay of animations.

Delay and duration classes are available at the following intervals:

<div class="delay|duration-{100|150|200|250... 1000 | 1250 | 1500 | 1750... 10750}"></div>Copy the code

4. Magic Animations CSS3

Website address: www.minimamente.com/p…

Magic CSS3 Animations Magic CSS3 Animations is a package of CSS3 Animations with special effects that users can use freely in web projects.

This animation library has some very beautiful and smooth animations, especially in 3D. There’s nothing to say. Try it yourself.

<div class="magictime fadeIn"></div>
Copy the code

Using JS mode:

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')
Copy the code

Using JQ mode:

$(".my-element").addClass("magictime fadeIn")
Copy the code

5. cssanimation.io

<div class="cssanimation fadeIn"></div>
Copy the code

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
Copy the code

$(".my-element").addClass("cssanimation fadeIn")
Copy the code

<div class="cssanimation fadeIn infinite"></div>
Copy the code

<div class="cssanimation leSnake"></div>
Copy the code

<div class="cssanimation leSnake {sequence|random}"></div>
Copy the code

<button class="hvr-fade">Hover me! </button>Copy the code

<div class="bounceIn"></div>
Copy the code

document.querySelector('.my-element').classList.add('bounceIn')
Copy the code

$(".my-element").addClass("bounceIn")
Copy the code

<div class="dot-elastic"></div>
Copy the code

<div class="shake shake-hard"></div>
Copy the code

document.querySelector('.my-element').classList.add('shake','shake-hard')
Copy the code

$(".my-element").addClass("shake shake-hard")
Copy the code