animate.css

animate.css是一个动画库，可以方便快速的制作出常见的动画效果，很适合强调，主页，滑块和注意力引导提示。

它预设了弹跳（bounce），摇摆（swing），颤抖（wobble），抖动（shake），闪烁（flash），翻转（flip），旋转（rotate），淡入淡出（fade），滑动（sliding），光速（lightspeed），缩放变焦（zoom），翻滚（roll）等动画效果。

基础用法

• 先下载（引入）animate.css
• 然后给盒子加上类名，例如：animated swing

animated类似于全局变量，它定义了动画的持续时间，默认1s；swing是动画具体的动画效果的名称，可以选择任意的效果

• 首先要有一个基础类“animated”
• 然后再加一个动画类
• 同时使用过渡和动画

keyframes关键帧

可能会觉得对于“延迟开始”和“提前结束”这两种需求，是完全可以通过定义延迟时间以及动画周期的时间来达到相同的效果的，但是，对于一个无限循环的动效而言，延迟开始永远只作用一次，当动画一旦开始进入周而复始的循环后，不再支持这个属性设置。因此，如果可以的话，尽量用关键帧的定义来完成。

transition组件

当元素被transition包裹之后，vue会自动分析被包裹的元素的css样式：fade-enter、fade-enter-active，然后构建一个动画过程。

当动画开始执行的瞬间会增加两个样式，当动画第一帧结束，开始第二帧的时候，会移除样式1，同时加上样式2，在动画执行的最后会将两个样式都移除。

延时执行

配置类名：

delay-2s: 2秒后再执行动画

delay-3s: 3秒后再执行动画

delay-4s: 4秒后再执行动画

delay-5s: 5秒后再执行动画

执行时长

slow: 用2秒执行完动画

slower: 用3秒执行完动画

fast: 用0.8秒执行完动画

faster: 用0.5秒执行完动画

无限重复执行动画

infinite

js控制

如果不是出现在页面时就马上执行的动画效果，而是通过点击事件触发的，也可以使用js的时间监听

animationend: 当css3动画结束后（是一个事件，类似于onclick）

addEventListener：事件监听