css3动画

@keyframes 和 animation

1. @keyframes

@keyframes animationname {
    keyframes-selector {'css-styles'}
}  

2. animation

key	描述	值
animation-name	名称
animation-duration	一个周期的时长	- s（秒） - ms（毫秒）
animation-delay	延迟时间	- s（秒） - ms（毫秒）
animation-direction	是否逆向	- normal（默认，从 0% 关键帧开始，到 100% 关键帧结束） - reverse（逆向，从 100% 关键帧开始，到 0% 关键帧结束） - alternate（正向反复，动画在正常和反向之间交替播放） - alternate-reverse（逆向反复，动画在反向和正常之间交替播放）
animation-iteration-count	重复次数	- n（延迟执行） - -n（提前执行） - infinite（无限次）
animation-play-state	是否暂停/恢复	- running（恢复） - paused（暂停）
animation-timing-function	速度曲线	- linear（匀速） - ease（低速开发，中间最快，结束变慢） - ease-in（低速开始，逐渐变快） - ease-out（快速开始，逐渐变慢） - ease-in-out（低速开始，中间最快，结束变慢） - cubic-bezier()（贝塞尔曲线） - steps()（逐帧动画)
animation-fill-mode	动画播放前后的状态	- none（默认） - forwards（保持最后一帧） - backwards（保持动画没执行前的状态） - both（动画没执行前，一直是动画的第一帧的状态，执行后是动画最后一帧的状态） 通过图来理解

animation-composition

animation-composition 属性定义了在多个动画同时影响同一属性时所使用的复合操作

问题

当多个动画对同一个属性进行操作时，只有最后一个动画才会生效

可以看到，x 轴的位移只会移动 100px，而不会移动 150px，因为 transform2 动画把 transform1 动画的 translateX 覆盖了

属性

以上面为例子，设置 animation-composition 会合成成以下情况

• replace：覆盖（默认值）。动画会覆盖原有属性

  transform: translateX(50px) rotate(45deg)

• add：追加。动画追加到原有属性后面

  transform: translateX(100px) rotate(45deg) translateX(50px)

• accumulate：累加。动画会和原有属性相同的部分进行累加

  transform: translateX(150px) rotate(45deg)

transition