CSS3学习笔记（6）——动画 animation、animate.css 动画库的使用

在前几篇博客中，我记录了CSS3中“过渡”的用法，但严格上过渡并不算是真正意义上自由的动画，因为它只是初始状态过渡到了最终状态的一个过程。可以理解为只有两个节点。

CSS3的 animation 样式提供了关键帧动画，通过关键字 @keyframes 配合 animation 可以设置多个节点（可理解为帧数）来精确控制一个或一组动画，常用来实现复杂的动画效果。

animation：

animation-name	指定动画名称
animation-duration	设置动画的总耗时，单位为s
animation-iteration-count	设置动画播放的次数，参数为数字或infinite（无穷），默认为1
animation-direction: alternate	设置交替动画，alternate属性代表来回交替
animation-delay	设置延迟，单位为s
animation-timing-function	linear 设置匀速
animation-fill-mode	设置动画结束时的状态，它有三种属性： （1）forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态 （2）backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态 （3）（默认）both:会保留动画的结束时状态，在有延迟的情况下也会立刻