CSS的动画特效

动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。

通过 @keyframes 创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。 

0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，我们应该始终定义 0% 和 100% 选择器。这里面0%就是一帧，50%是一帧，100%也是一帧。

最后,请使用动画属性来控制动画的外观，同时将动画与选择器绑定

一、@keyframes

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

合法的值：

0-100%

from（与 0% 相同）

to（与 100% 相同）

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

animation 属性是一个简写属性，用于设置六个动画属性：

 1. animation-name    规定需要绑定到选择器的 keyframe 名称

 2. animation-duration    规定完成动画所花费的时间，以秒或毫秒计

 3. animation-timing-function 规定动画的速度曲线

 4. animation-delay     规定在动画开始之前的延迟

 5. animation-iteration-count    规定动画应该播放的次数

 6.animation-direction 规定是否应该轮流反向播放动画

二、animation

1.animation-name 就是需要绑定的@keyframe的名称了。

2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。

linear 动画从头到尾的速度是相同的

ease 默认。动画以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值

3.animation-iteration-count 默认为1次，可以填写数字，nfinite 规定动画应该无限次播放

4.animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。如果把动画设置为只播放一次，则该属性没有效果。

5.animation-duration和animation-delay分别是动画的持续时间和延时播放

三、animation-play-state和animation-fill-mode

1.animation-play-state属性规定动画正在运行还是暂停。只有两个属性可以设置：

paused 规定动画已暂停

running 规定动画正在播放

2.animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。

none 不改变默认行为

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both 向前和向后填充模式都被应用。

动画分为 初始状态 等待期 动画执行期 完成期 四个阶段：

1、初始状态，就是没有触发动画效果时，你元素原本应该有的状态

2、等待期，就是 animation-delay 设置的延迟期间

3、动画执行期，指的是 delay 结束瞬间开始执行动画，一直持续到最后一帧

4、完成状态，执行完最后一帧时，元素处于的状态

none 表示 等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响

both 表示 等待期样式为第一帧样式，完成期保持最后一帧样式

backwards 表示等待期为第一帧样式，完成期跳转为初始样式

forwards 表示等待期保持初始样式，完成期间保持最后一帧样式

动画结束之后保持的状态：

none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样。

forwards 表示将动画元素设置为整个动画结束时的状态。

backwards 明确设置动画结束之后回到初始状态。

both 表示设置为结束或者开始时候的状态。一般都是回到默认状态。

 

注：本文从老师教学文档里提取。