CSS3 animation（动画） 属性

工欲善其事必先利其器，这一篇把animation的所有属性及属性值详细的讲了一下，后面会慢慢开始写一些css动画。

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。
inherit	从父元素继承属性。

示例：

div
{
    animation:mymove 5s infinite;
}

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

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

默认值:	ease
继承:	no

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start \ end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：- start：表示直接开始。end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

linear 动画从头到尾速度相同

animation: move-circle 3s linear;

等价于

animation: move-circle 3s;

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

animation: move-circle 3s ease;

缓动函数通过控制时间和速度之间的关系来定义动画的变化。对于 "ease"，其速度变化是一个类似于正弦曲线的函数，即动画开始和结束时速度较慢，中间时速度较快。这使得动画在开始和结束时更加平缓，中间部分加速。

1. 动画开始时： 速度较慢，实现了一个缓慢启动的效果。
2. 动画中间： 速度逐渐加快，使得动画在中间部分更快。
3. 动画结束时： 速度再次减缓，实现了一个平缓结束的效果。

"ease" 缓动函数的具体数学公式通常是通过贝塞尔曲线来描述的。在 CSS 中，"ease" 缓动函数可以近似描述为一个 cubic Bézier 曲线，其控制点的位置确定了速度的变化。

数学公式为：

B(t)=C1⋅(3t^2−2t^3)B(t)

在这里：

• t 是时间轴上的时间百分比（0 到 1）。
• c1 是控制点的纵坐标。

具体到 "ease" 缓动函数，它的控制点通常设置为 (0.25,0.1)，这使得曲线在动画的开始和结束时较为平缓，中间部分速度变化较快。

所以，对于 "ease" 缓动函数，其数学公式可以表示为：

B(t)=0.25⋅(3t^2−2t^3)

ease-in 动画以低速开始

animation: move-circle 3s ease-in;

"ease-in" 是一种缓慢开始的时间曲线，也称为加速曲线。它表示动画开始时速度较慢，然后逐渐加速，直到达到最终速度。是一个二次贝塞尔曲线，它的速度变化相对较慢，呈现出一种平滑的过渡。

在缓动函数中，我们可以表示为 (x, y)，其中 x 表示时间轴上的时间百分比，y 表示速度轴上的速度百分比。对于 "ease-in"，这个曲线可以近似表示为：

1. 起始点 P0: (0, 0)
2. 控制点 P1: (c, 1-c), 其中 c 是一个小于 1 的正数，控制曲线的形状
3. 终点 P2: (1, 1)

这个贝塞尔曲线的方程可以用二项式方程来表示。在 "ease-in" 的情况下，我们可以表示为：

B(t)=(1−t)^2

其中，t 是时间轴上的时间百分比。

这个方程描述了 "ease-in" 的加速曲线。通过不同的 c 值，你可以调整曲线的形状，但一般来说，c 取较小的值，使得曲线在开始时较为平缓，然后逐渐加速。

ease-out 动画以低速结束

animation: move-circle 3s ease-out;

"ease-out" 是一种 CSS 缓动函数，它描述了动画在时间轴上的速度变化。与 "ease-in" 相反，"ease-out" 动画在开始时速度较快，然后逐渐减缓，最终结束时速度较慢。这种速度变化使得动画在开始时显得更加生动，而在结束时更为平缓。

数学上，"ease-out" 缓动函数可以近似描述为一个 cubic Bézier 曲线。其数学公式为：

B(t)=c1⋅(3t^2−2t^3)

在这里：

• t 是时间轴上的时间百分比（0 到 1）。
• c1 是控制点的纵坐标。

对于 "ease-out" 缓动函数，通常控制点的位置设置为(0,0)。这样的设置使得动画在开始时速度较快，然后逐渐减缓，最终结束时速度较慢。

具体到 "ease-out" 缓动函数，其数学公式可以表示为：

B(t)=0.25⋅(3t^2−2t^3)

这个公式描述了 "ease-out" 缓动函数的速度变化。同样地，实际应用中通常不需要手动计算这些值，而是直接在 CSS 中使用 "ease-out" 缓动函数。

从这个公式中可以看出，"ease-out"这个缓动函数小球实际运动是越来越慢的

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

animation: move-circle 3s ease-in-out;

"ease-in-out" 是一种 CSS 缓动函数，它是 "ease-in" 和 "ease-out" 两者的结合。它描述了动画在时间轴上的速度变化，具体特点是在开始和结束时速度较慢，中间时速度较快。

与 "ease" 缓动函数相比，主要区别在于 "ease-in-out" 在整个动画过程中都相对平滑，既避免了开始时的突然加速，也避免了结束时的突然减缓。

"ease-in-out" 缓动函数的数学公式也可以近似描述为一个 cubic Bézier 曲线。其数学公式为：

B(t)=0.5⋅(1−cos(πt))

在这里：

• t 是时间轴上的时间百分比（0 到 1）。

这个公式描述了 "ease-in-out" 缓动函数的速度变化。与 "ease" 不同，"ease-in-out" 在整个动画过程中都相对平缓，没有明显的开始和结束时的速度变化。

• "ease": 在整体上是平缓的，但在开始和结束时有些许加速和减缓。
• "ease-out": 开始时速度较快，然后逐渐减缓，结束时速度较慢。
• "ease-in-out": 整体上相对平缓，避免了 "ease" 中明显的开始和结束时速度变化。

steps 时间函数中的间隔数量（步长）

animation: move-circle 3s steps(5);

animation: move-circle 3s steps(5, start);

cubic-bezier(n,n,n,n)

animation: move-circle 3s cubic-bezier(0,0,0.25,1);

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

P0：默认值 (0, 0)

P1：动态取值 (x1, y1)

P2：动态取值 (x2, y2)

P3：默认值 (1, 1)

语法：

cubic-bezier(x1,y1,x2,y2)

Cubic Bézier 曲线的一般表示式为：

B(t)=(1−t)^3⋅P0+3(1−t)^2⋅t⋅P1+3(1−t)⋅t^2⋅P2+t^3⋅P3

在 cubic-bezier(x1, y1, x2, y2) 中：

• P0 是起始点，可以看作是 (0,0)。
• P3 是终点，可以看作是 (1,1)。
• P1 的横坐标为 x1，纵坐标为 y1。
• P2 的横坐标为 x2，纵坐标为 y2。

将这些值代入公式，得到具体的缓动函数：

B(t)=(1−t)^3⋅(0,0)+3(1−t)^2⋅t⋅(x1,y1)+3(1−t)⋅t^2⋅(x2,y2)+t^3⋅(1,1)

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

animation: move-circle 3s cubic-bezier(0,0,0.25,1) 3;

值	描述
n	一个数字，定义应该播放多少次动画	测试 >>
infinite	指定动画应该播放无限次（永远）

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

属性值

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

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

属性值

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

forwards

animation: move-circle 3s cubic-bezier(0,0,0.25,1) 1 forwards;

backwards

animation: move-circle 3s cubic-bezier(0,0,0.25,1) 1 backwards;

1. none：

   • 默认值。表示动画不应用于目标元素的任何样式，即动画执行完毕后，目标元素将回到初始状态。

2. forwards：

   • 表示在动画结束后，目标元素应该应用动画的最后一帧的样式。换句话说，目标元素将停留在动画的最后一帧的状态。

3. backwards：

   • 表示在动画开始前，目标元素应该应用动画的第一帧的样式。即在动画开始前，目标元素就已经具有了动画的初始状态。

4. both：

   • 结合了 forwards 和 backwards。表示在动画开始前应用第一帧的样式，在动画结束后应用最后一帧的样式。

animation-play-state

animation-play-state 是 CSS 动画属性，用于控制动画的播放状态，即动画是正在运行还是暂停。

1. running：

   • 默认值。表示动画正在运行，即动画效果正在应用到目标元素上。

2. paused：

   • 表示动画被暂停，即动画效果不再应用到目标元素上。元素将保持在当前的样式状态，直到动画再次被设置为 running。