CSS3 Animation

关键帧（@keyframes）

关键帧定义动画不同阶段的状态。

当我们在定义不同关键帧，元素属性的个数是一个变化的值。
如果一个关键帧的属性，没有出现在其他关键帧的时候，那么这些属性将会使用上一帧的默认值。
区别在于，缺省之后的渐变效果是不会出现的。

@keyframes dropdown {
    0% { top: 0; }
    30% { top: 300px; }
    50% { top: 150px; }
    70% { top: 300px; }
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  }
  }

属性

简写形式：

animation:
[animation-name] [animation-duration] // 动画的名称、持续时间
[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] [animation-direction] // 播放次数、播放顺序

animation-timing-function
定义了动画的播放速度曲线
可选参数:
ease：默认，低速开始，然后加快，然后再变慢
ease-in：低速开始
ease-out：低速结束
ease-in-out：低速开始和结束
linear：匀速
cubic-bezier(number, number, number, number)：自定义

animation-direction
规定动画方向
可选参数：
normal 正序播放
reverse 倒序播放
alternate 交替播放
alternate-reverse 反向交替播放
normal, reverse
alternate, reverse, normal

animation-delay
规定动画延迟多久开始播放
默认值0s，表示动画在该元素上后立即开始执行。
该值以秒(s)或者毫秒(ms)为单位。

animation-iteration-count
动画播放次数
参数:
infinite 无限
number 规定次数

animation-fill-mode
规定动画播放前后的样式
参数：
none 动画执行前后不改变任何样式
forwards 保持目标动画最后一帧的样式
backwards 保持目标动画第一帧的样式
both 动画将会执行 forwards 和 backwards 执行的动作

animation-timing-function
动画是否运行或暂停
参数：
running 动画正常播放
paused 动画暂停播放

其他动画

transition

过渡动画。从初始状态到结束状态过程的过渡。
transition-property：规定对哪个属性进行过渡
transition-duration：定义过渡的时间，默认是0
transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease
transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

animate.css

这是一个CSS3动画库，里面预设了很多常用动画，只需要引入之后，用JS把相应动画类添加到对应元素上。如果要设置参数，就在对应元素的css样式里设置。