Animate.css 纯CSS动画库_html/css_WEB-ITnose

github上的地址是： https://daneden.github.io/animate.css/

Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

基本的使用方法

1. 引入css文件到

   标签中

2. 给你想让执行动画的元素的class添加animated. 你还可以添加 infinite这个样式让动画无限循环.

3. 最后你给元素添加下面的一个class，就可以实现不同的动画效果:

   • bounce
   • flash
   • pulse
   • rubberBand
   • shake
   • headShake
   • swing
   • tada
   • wobble
   • jello
   • bounceIn
   • bounceInDown
   • bounceInLeft
   • bounceInRight
   • bounceInUp
   • bounceOut
   • bounceOutDown
   • bounceOutLeft
   • bounceOutRight
   • bounceOutUp
   • fadeIn
   • fadeInDown
   • fadeInDownBig
   • fadeInLeft
   • fadeInLeftBig
   • fadeInRight
   • fadeInRightBig
   • fadeInUp
   • fadeInUpBig
   • fadeOut
   • fadeOutDown
   • fadeOutDownBig
   • fadeOutLeft
   • fadeOutLeftBig
   • fadeOutRight
   • fadeOutRightBig
   • fadeOutUp
   • fadeOutUpBig
   • flipInX
   • flipInY
   • flipOutX
   • flipOutY
   • lightSpeedIn
   • lightSpeedOut
   • rotateIn
   • rotateInDownLeft
   • rotateInDownRight
   • rotateInUpLeft
   • rotateInUpRight
   • rotateOut
   • rotateOutDownLeft
   • rotateOutDownRight
   • rotateOutUpLeft
   • rotateOutUpRight
   • hinge
   • rollIn
   • rollOut
   • zoomIn
   • zoomInDown
   • zoomInLeft
   • zoomInRight
   • zoomInUp
   • zoomOut
   • zoomOutDown
   • zoomOutLeft
   • zoomOutRight
   • zoomOutUp
   • slideInDown
   • slideInLeft
   • slideInRight
   • slideInUp
   • slideOutDown
   • slideOutLeft
   • slideOutRight
   • slideOutUp

例子:

Example

查看所有的动画效果