css3 animation 和animate.css

最近在看一些关于css3动画的文章，主要是css3 animation和animate.css。

二者的区别

css3 animation是css3的样式属性，它有animation-name（动画名）、animation-duration（持续时间）、animation-timing-function（播放方式）、animation-delay（开始时间）、animation-iteration-count（循环次数）、animation-direction（播放方向）、animation-play-state（播放状态）、animation-fill-mode（时间外属性）共8个子属性。
animate.css是一个动画库，它集成了一些简单的动画便于大家引用，其作用类似于java的库文件。

css3 animation属性

兼容性

animation属性目前得到了众多现代浏览器的支持，不过和很多css3属性一样，需要添加浏览器的私有前缀。

与transition属性

css3可以使用transition属性来实现过渡效果，但是功能相对有限。与transition属性相比，animation属性可以通过@keyframe构建一些transition的动画效果。

@keyframe

@keyframe：关键帧，用来声明动画。
语法规则：

@keyframes 动画名称 {
    关键影格选择器1 { 众多css样式; }
    关键影格选择器2 { 众多css样式; }
  ...
}

tips：
1. 每个关键帧看起来就像它自己嵌套的CSS声明块，可以使用from、to或者百分比，或者以逗号隔开的列表。
2. 在每个关键帧之间，浏览器会平滑的插入值(重排or重绘)。
3. 在@keyframe中的关键帧并不一定按照顺序指定，关键帧顺序按照百分比顺序
4. 元素的变化属性值完全由animation 控制，动画后面的值回覆盖前面的值，不会出现叠加效果。
5. 关键帧中出现的 !important 关键词将会被忽略
6. 没必要在keyframe中对0% 和 100% 声明相同的属性和值

animation-name

animation-name：主要用来制定一个关键帧动画的名字，这个动画必须对应一个@keyframe规则。css加载时会应用animationg-name指定的动画，从而执行动画。
animation-name：none | IDENT；
IDENT：是由@keyframe创建的，名称必须一致否则无法实现。
none：默认值，没有任何动画效果，其可以用来覆盖任何动画效果。

animation-duration

animation-duration：主要用来设置动画播放所需的时间，一般以秒为单位。
animation-duration：time
time取值为数值，单位为秒，其默认值为0s，也就意味着动画周期为0s，没有任何动画效果，如果取值为负将被视为0s
该值可用单位为秒(m)和毫秒(ms)。如果未设置单位，定义无效。

animation-timing-function

animation-timing-function：主要用来设置动画的播放方式。
animation-timing-function：ease | liner | … | cubic-bezier()
animation-timing-function具体指的是元素根据时间的推进来改变属性值的变化速率
Steps函数

animation-delay

animation-delay：用于定义动画开始播放的是时间，是延迟还是提前等。
animation-delay：time
值可以为负值，负值代表动画提前开始，可用来简易动画调试。

animation-iteration-count

animation-iteration-count：用来定义动画的播放次数。
animation-iteration-count：infinite | number

tips：
1. 此属性用于定义动画播放多少次，其值通常为整数，也可使用带有小数的数字，默认值为1.如果取值为infinite，则动画将会无限循环播放。
2. 从第二次执行开始并不会等待delay
3. 动画播放的次数 不可为负值. 可以用小数定义循环(0.5 将播放动画到关键帧的一半（from 0 ~ 50%).

animation-direction

animation-direction：用来定义动画的播放方向。
animation-direction：normal | alternate
此属性用来指定动画的播放方向
默认值为normal，表示每次循环动画都向前播放
reverse，每次向后播放；
alternate，动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。
alternate-reverse，动画第一次运行时是反向的，然后下一次是正向，后面依次循环

animation-play-state

animation-play-state：用来定义动画的播放状态。
animation-play-state：running | paused
此属性用来指定动画的播放状态，running为默认值，主要作用类似于播放器，可以通过paused让正在播放的动画停下来，也可以通过running将暂停的动画重新播放，如果暂停了动画的播放，元素的样式将会回到最原始设置的状态。

animation-fill-mode

animation-fill-mode：用来定义动画的时间外属性。
animation-fill-mode：forwards | backwards | both | none
属性默认值为none，动画按照预期结束，完成最后一帧后动画反转到初始状态；
取值为forwards时，动画在结束后继续应用最后一帧的样式
取值为backwards时，会在元素应用动画样式时迅速应用动画的初始帧，当取值为both时会同时应用forwards和backwards的效果。
目标保持动画帧的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count;

tips:

1. animation属性可混合使用，类似background；
2. 如果提供多组属性值，以逗号进行分隔。
3. 如果只提供一个time参数，则为 ‘animation-duration’
   的值定义；如果提供二个time参数，则第一个为 ‘animation-duration’的值定义，第二个为 ‘animation-delay’ 的值定义
4. 动画demo可参考https://gitlab.com/Doraemon/CSS3Animation.git，该项目包含7个小demo，具体介绍了该属性每个子属性的用法。