前端必知必会-CSS动画

---

CSS 动画

CSS 允许在不使用 JavaScript 的情况下对 HTML 元素进行动画处理！

什么是 CSS 动画？

动画可让元素从一种样式逐渐变为另一种样式。

您可以根据需要更改任意数量的 CSS 属性，次数不限。

要使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧保存元素在特定时间将具有的样式。

@keyframes 规则

当您在 @keyframes 规则内指定 CSS 样式时，动画将在特定时间从当前样式逐渐变为新样式。

要使动画正常工作，您必须将动画绑定到元素。

以下示例将“示例”动画绑定到 <div> 元素。动画将持续 4 秒，并将 <div> 元素的背景颜色从“红色”逐渐更改为“黄色”：

示例

/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* 要应用动画的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

注意：animation-duration 属性定义动画需要多长时间才能完成。如果未指定 animation-duration 属性，则不会发生动画，因为默认值为 0s（0 秒）。

在上面的示例中，我们使用关键字“from”和“to”（代表 0%（开始）和 100%（完成））指定了样式何时更改。

也可以使用百分比。通过使用百分比，您可以根据需要添加任意数量的样式更改。

以下示例将在动画完成 25%、50% 以及 100% 时更改

元素的背景颜色：

示例

/* 动画代码 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* 要应用动画的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

以下示例将在动画完成 25%、50% 以及 100% 时更改 <div> 元素的背景颜色和位置：

示例

/* 动画代码 */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* 要应用动画的元素 */
div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

延迟动画

animation-delay 属性指定动画开始的延迟。

以下示例在开始动画之前有 2 秒的延迟：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

也可以使用负值。如果使用负值，动画将像已经播放了 N 秒一样开始。

在以下示例中，动画将像已经播放了 2 秒一样开始：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

以下示例将在动画停止前运行 3 次：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

以下示例使用值“infinite”使动画永远继续：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

以反向或交替循环运行动画

animation-direction 属性指定动画是向前、向后还是交替循环播放。

animation-direction 属性可以具有以下值：

normal - 动画按正常方式播放（向前）。这是默认值
reverse - 动画以反向（向后）播放
alternate - 动画先向前播放，然后向后播放
alternate-reverse - 动画先向后播放，然后向前播放
以下示例将以反向（向后）运行动画：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

以下示例使用值“alternate”使动画先向前运行，然后向后运行：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternative;
}

以下示例使用值“alternate-reverse”使动画先向后运行，然后向前运行：

示例

div {
width: 100px;
height: 100px;
position:relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternative-reverse;
}

指定动画的速度曲线

animation-timing-function 属性指定动画的速度曲线。

animation-timing-function 属性可以具有以下值：

ease - 指定动画以缓慢开始，然后快速结束（这是默认值）
linear - 指定动画以相同的速度从开始到结束
ease-in - 指定动画以缓慢开始
ease-out - 指定动画以缓慢结束
ease-in-out - 指定动画以缓慢开始和结束
cubic-bezier(n,n,n,n) - 允许您在 cubic-bezier 函数中定义自己的值
以下示例显示了一些可以使用的不同速度曲线：

示例

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

指定填充模式动画

CSS 动画在播放第一个关键帧之前或播放最后一个关键帧之后不会影响元素。animation-fill-mode 属性可以覆盖此行为。

animation-fill-mode 属性指定动画未播放时（开始前、结束后或两者）目标元素的样式。

animation-fill-mode 属性可以具有以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式
forwards - 元素将保留最后一个关键帧设置的样式值（取决于动画方向和动画迭代次数）
backwards - 元素将获取第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留此值
both - 动画将遵循前进和后退的规则，在两个方向上扩展动画属性
以下示例让 <div> 元素在动画结束时保留最后一个关键帧的样式值：

示例

div {
width: 100px;
height: 100px;
background: red;
position:relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

以下示例让 <div> 元素获取动画开始前（在 animation-delay 期间）第一个关键帧设置的样式值：

示例

div {
width: 100px;
height: 100px;
background: red;
position:relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: reverses;
}

以下示例让 <div> 元素获取动画开始前第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：

示例

div {
width: 100px;
height: 100px;
background: red;
position:relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

动画简写属性

下面的示例使用了六个动画属性：

示例

div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternative;
}

使用简写动画属性可以实现与上述相同的动画效果：

示例

div {
animation: example 5s linear 2s infinite alternative;
}

---

总结

本文介绍了CSS动画的使用，如有问题欢迎私信和评论