chaihongjun.me

Animate.css动画效果CSS集合

   Animate.css是一款又酷又有趣的跨浏览器的动画效果集合,当然是CSS效果的。按照github上的介绍: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.

Animate.css动画效果CSS集合

  在我们的项目中引入和使用非常的简单,

1.首先是引入文件,可以下载Animate.css然后在文档内引入

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

或者使用CDN版本

<head>
  <link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
</head>

2.给需要设置动画的元素添加一个animated的class

<img src="demo.html"  class="demo animated" alt="demo"/>

如果需要循环这个动画只要再添加"infinite"这个class就可以无限循环动画

<img src="demo.html"  class="demo animated infinite" alt="demo"/>

3.最后再加一个动画样式的class,这个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

详细的动画在这里:Animate.css


当然也可以结合jquery去对元素做Animate.css动画的增删,详细请参考作者 github

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»