css动画之animation

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战。

前言

animation 属性在实现 css 动画中发挥重要的作用，理解 animation 各项属性的使用，以及在创建动画的过程中发挥的作用，能够帮助我们更好的实现想要的动画效果。

@keyframes

关键帧，结合 animation 使用，负责控制 css 动画中的关键画面（ animation 只是设置动画的规则）。在传统的动画设计要素中称为关键动作，即在场景变化的间隔时间内，绘制关键图片。

@keyframes 内按动画时间的百分比划分为0%-100%，可以在任意一个时间点插入关键画面。每一组关键画面，会赋予一个特定的名称。

@keyframes animationName {
    0%{
       ... 
    }
    50% {
       ...
    }
    100%{
       ...
    }
}

@keyframes 遵循以下规则：

未指定起始和终止状态（即0%和100%）时，将使用元素的原始状态作为开始和结束的动画状态。
关键帧中使用非动画属性，该属性会被忽略，其他属性仍然生效。
关键帧不存在样式层叠，同名 @keyframes 以最后一个生效，同名百分比，以最后一个生效。
关键帧内使用 !important 无效。

animation

使用 animation 创建动画，需要结合 @keyframes 使用，同时 animation 也包含多个属性：animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state，通过给这些属性设置不同的值可以产生多样的动画效果。

animation-name

该属性指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的一组关键画面。

animation-duration

表示一个动画周期的时长，值为带时间单位的数值，该值控制一系列动画的持续时间，持续时间越短，整个动画的变化速度就越快。

animation-timing-function

定义动画在每一周期的执行节奏。

timing-function 表示一个数学函数,描述了一个动画中一维数值的改变速度，主要有：

cubic-bezier()：三次贝塞尔曲线。
steps()：阶梯函数

cubic-bezier

三次贝塞尔曲线

该曲线有四个关键点，p0，p1始终表示为（0,0），（1,1），那么曲线的平滑程度将由 p1，p2共同控制；（p1控制前半段，p2控制后半段）；如果以p0,p1表示动画的起点终点，则曲线的变化就表示动画的变化节奏；

css 中通过设置P1(x1,y1)，P2(x2,y2)进行控制；其中X1，X2必须满足区间[0,1]（超过则无效），Y1,Y2不在[0,1]区间，会产生反向运动的效果；

animation-timing-function: cubic-bezier(x1, y1, x2, y2);

<!--动画表现为开始快，中间慢，结束快-->
animation-timing-function:cubic-bezier(0.1, 0.7, 1, 0.1);

css 中提供了一些由 cubic-bezier()曲线函数演化而来的timing-function关键字：

linear：表示 cubic-bezier(0.0, 0.0, 1.0, 1.0)。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。

linear

ease：此关键字表示 cubic-bezier(0.25, 0.1, 0.25, 1.0)。动画开始缓慢，中间加速，结束缓慢。
ease-in：cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始时缓慢，然后逐步加速，最后保持一定的速度直到动画停止。
ease-out：此关键字表示 cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始很快，然后逐渐减慢。
ease-in-out：此关键字表示 cubic-bezier(0.42, 0.0, 0.58, 1.0)。使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于 ease-out函数，即先慢后快再慢。

steps

阶梯函数，定义了一个等距步长的阶梯函数。

css 的 steps()函数包含两个参数，第一个为阶梯数，第二个参数为函数的方向 start｜end;

start: 表示开始时进行一次阶跃
end：表示结束时进行一次阶跃

animation-timing-function: steps(2,end);
animation-timing-function: steps(4,start)

steps()函数演化的关键字有：

step-start：此关键字表示 steps(1, start)。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
step-end：此关键字表示定时函数 steps(1, end)。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。

animation-delay

表示动画延迟多久后开始执行，时间单位的数值，默认为0s

animation-iteration-count

表示动画执行的周期次数：

infinite：无限次数
数字：表示周期数，可以为小数，例如1.5，表示一个半周期；

animation-iteration-count: infinite;
animation-iteration-count: 1.5;

animation-direction

表示动画播放的方向，即是否反向播放；

normal：默认值，每个动画周期都从起点开始
reverse：每个动画周期都从终点开始
alternate：动画周期交替运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。
alternate-reverse：交替运行，由反向开始；

animation-fill-mode

设置动画开始之前和结束之后的样式状态；

none：默认值，在开始之前，结束之后都不应用动画样式。
forwords：动画结束后，元素保持最后一帧的动画状态。
backwords：动画开始之前，元素应用第一帧动画的状态（开始之前，表示动画未开始前的一段时间，例如animation-delay的延迟时间内）。
both：即同时应用 forwords 和 backwords。动画开始之前，元素应用第一帧，结束之后，应用最后一帧。

如果 timing-function 为steps(1,end)，fill-mode 设置了 forwords 才可以看出效果（结合steps函数便可以理解）。

animation-paly-state

定义一个动画是运行状态还是暂停状态，

running：动画正在运行。
paused：动画暂停中。

这个属性有两个用处：

通过查询 animation-paly-state 值，可以判断动画在运行还是暂停状态。
通过改变 animation-paly-state 的值，可以改变当前动画的状态。

animation 相关的事件

与 animation 设置的动画相关的事件有：

animationstart
animationend
animationend

通过监听这些事件，可以获取到与动画执行相关的信息。