animation动画

坑军之王

2021-12-01

191

Animation动画允许开发者定义多个关键帧，由浏览器自行计算关键帧之间的虚拟动画，从而成为动画。

以下是animation所支持的属性：

在上述描述的属性之前，首先需要设定的属性就是：@keyframes，这个属性将定义各个关键帧,格式如下：

@keyframes 动画名{

from/to/%{

关键帧样式

}

在格式中，from、to、%分别指开始、结束和自行设定百分比，自行设置百分比是指一个视频的进度，取值为0%-100%。随后在括号内输入关键帧时的样式（css）代码。

@keyframes后的动画名是指所设定的关键帧，在元素中与animation-name相匹配。

animation-duration指定动画的持续时间，即整个动画的播放时间。

animation-timing-function是决定动画的播放速度。属性如下：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay指定动画的延迟生效时间，就是动画与最初相比向后推迟多长时间。

animation-iteration-count 指定动画的播放次数，如果想无限次的话，使用infinite

animation-fill-mode 指定动画在不播放时的样式是否可见，属性如下：

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。