css3中的过渡（transition）和动画（animation）

过渡：

transition-property：指定过渡的CSS属性，none | all | property（具体的过渡属性）

transition-duration：指定过渡所需的完成时间

transition-timing-function：指定过渡函数（用于设置过渡的速度）

transition-delay：指定过渡的延迟时间（可以设置成正数，也可以设置成负数）

多个元素过渡的时候，直接用逗号分离开即可：

transition:background-color 2s , height 5s;

动画：

css3的animation制作动画包含两个部分：首先用关键帧声明一个动画，其次是在animation调用关键帧声明的动画

在css3中，使用@keyframes来声明一个动画：

@keyframes animationname {keyframes-selector { css-style}}

animationname：必需。定义动画的名称

keyframes-selector：必需。动画时长的百分比

合法值：0-100% | from（与0%相同）| to（与100%相同）

css-style：必需。一个或多个合法的css样式属性

animation属性：

animation-name：指定要绑定到选择器的关键帧的名称

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期

animation-delay：设置动画在启动前的延迟间隔

animation-iteration-count：定义动画的播放次数

animation-direction：指定是否应该轮流反向播放动画

normal：默认值。动画正常播放

reverse：动画反向播放

alternate：动画在奇数次时正向播放，偶数次时反向播放

alternate-reverse：动画在奇数次时反向播放，偶数次时正向播放

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式（none | forwards | backwards | both | initial | inherit）

animation-play-state：指定动画是否正在运行或已停止（paused 指定暂停动画 | running 指定正在运行的动画）

动画对应的事件：

animationstart：css动画开始后触发

animationiteration：css动画重复播放时触发

animationend：css动画完成后触发