animate.css

animate.css是一个开源的CSS3动画库，其中包含了大量的CSS3动画效果。它是由Daniel Eden在2013年创建的，目前在Github上已经有超过7.6万个星标和2.3万次 fork。

安装

你可以从GitHub上获取animate.css，或者使用NPM / Bower / Yarn等包管理工具进行安装：

npm install animate.css --save

或

bower install animate.css --save

使用

要使用animate.css，只需将“animate.css”文件引入到你的HTML文件中，然后将所需的类添加到要应用动画效果的元素中。例如，要对一个元素应用弹跳动画效果，只需将“bounce”类添加到该元素上即可。

<link rel="stylesheet" href="animate.css">
<div class="bounce">I am bouncing!</div>

演示和文档

animate.css的官方网站提供了各种演示和文档，你可以查阅它们以了解小型和大型动画，跨浏览器兼容性，以及如何使用和自定义animate.css。

• Animate.css官网
• Animate.css Github首页

如何使用Animate.css创建动画

• 选中您要添加动画效果的元素，可以使用HTML标记或直接使用CSS选择器。

• 在选定元素的类名中添加一个animate.css类名，动画特效将适用于该元素。 如果要在页面滚动到某个位置后才出现该元素，则可以在类名中添加“wowjs”类名。

<div class="wow animate__bounceInDown"></div>

动画类

animate.css提供了动画特效的定义，你可以找到你想要的这些预定义的动画。此外，你可以通过JavaScript将延迟，持续时间和其他值与这些动画一起使用。

目前支持的动画类有：

• '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'
• 'jackInTheBox'
• 'rollIn'
• 'rollOut'
• 'zoomIn'
• 'zoomInDown'
• 'zoomInLeft'
• 'zoomInRight'
• 'zoomInUp'
• 'zoomOut'
• 'zoomOutDown'
• 'zoomOutLeft'
• 'zoomOutRight'
• 'zoomOutUp'
• 'slideInDown'
• 'slideInLeft'
• 'slideInRight'
• 'slideInUp'
• 'slideOutDown'
• 'slideOutLeft'
• 'slideOutRight'
• 'slideOutUp'

自定义animate.css

Animate.css是开源的，你可以轻松修改它以产生自己的动画效果。 可以更改CSS属性和关键帧，或通过使用JavaScript添加自己的动画效果。

结语

animate.css是一款十分优秀的CSS3动画库，它可以让你轻松制作出各种炫酷的动画效果。如果你正在寻找一个优秀的CSS3动画库，那么animate.css肯定不会让你失望。