CSS-Animation&Transition

Animation

animation动画

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0，0s意味着动画没有时间，持续时间不能为负值。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。该延迟时间是指整个动画的延迟时间，而不是每个循环的延迟时间，只在动画开始时进行一次时间延迟。如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值。
animation-iteration-count	规定动画被播放的次数。默认是 1，可以是整数也可以小数，但不能是0和负数。如果为infinite则表示无限次动画。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”，running表示播放中，paused表示动画暂停。

补充如下：

animation-direction: 动画方向(默认值为normal)

1. normal: 正向播放。
2. reverse: 反向播放。
3. alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放。
4. alternate-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放。

animation-fill-mode: 填充模式(默认值为none)

1. none: 动画结束后，元素移动到初始状态。
   注意：初始状态并不是指0%的元素状态，而是元素本身属性值。
2. forwards: 元素停在动画结束时的位置。
   注意：动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数。
3. backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同。
   注意：动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。
4. both: 同时具有forwards和backwards的效果。

关键帧：

animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画

关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式

1. 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析。0%不可以省略百分号
2. 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略。
3. 如果0%或100%不指定关键帧，将使用该元素默认的属性值。
4. 若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值。
5. 空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则。

Transition

transition动画

语法：transition: property duration timing-function delay;

默认值：all 0 ease 0；

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

Animation和Transition的区别

主要区别是：

1. transition需要触发一个事件才能改变属性；animation可以自动执行。
2. transition不能重复发生，除非再一次触发；animation可以重复发生。
3. transition只有开始和结束状态；animation可以指定任意的过渡状态。
4. transition不能暂停；animation可以暂停，比如触发hover事件。
5. transition为2帧，从from … to，而animation可以一帧一帧的。

有错误欢迎指出~