The use of animation library Animate.css

Brief introduction

Animate.css is a CSS3 animation library from abroad that presets to cause bounce (bounce), Swing (swing), tremble (wobble), jitter (Shake), Flicker (Flash), flip (flip), rotate (rotate), Fade (Fade), swipe (Sliding), Speed of Light (lightspeed), Zoom Zoom (zoom), roll, and more than 70 kinds of animation effects, with the help of animate.css can easily and quickly produce common animation effects. Of course ANIMATE.CSS is compatible only with browsers that support CSS3 animate properties: ie10+, Firefox, Chrome, Opera, Safari.

How to use

1. Introduction of documents
<link rel="stylesheet" href="animate.min.css">


2. Call in HTML


Add the class attribute to the element, animated must be added, and Bounceout is the name of the animation effect.


You can also animate native JS or jquery dynamically, as long as you add the corresponding animation name to the class of the element you want to animate, such as

$(function(){ $(‘#jqhtml‘).addClass(‘animated bounce‘);});



The default settings for ANIMATE.CSS may sometimes not be what we want, so you can reset them, such as:

#jqhtml{ animate-duration: 2s; //动画持续时间 animate-delay: 1s; //动画延迟时间 animate-iteration-count: 2; //动画执行次数}

<a href= "http://www.jqhtml.com/yanshi?demourl=wp-content%2fuploads%2f2017%2f01%2ftx%2ftx20170192%2f& DEMOTITLE=CSS3 Animation library Animate.css "> online Demo

Example

Here are the effects that the front end library collects for everyone
66 ANIMATE.CSS-based CSS message alert animation effects
Responsive Lightbox effects based on magnific-popup.js and ANIMATE.CSS
Cool jquery message Notification box plug-in based on ANIMATE.CSS
SVG text animation effect plugin Animatedletters
ANIMATE.CSS-based jquery full-screen slideshow plugin

Http://www.jqhtml.com/910.html

The use of animation library Animate.css