CSS动画

1.1@keyframes 规则

如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

示例代码：

/* 动画代码 */
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
/* 应用动画的元素 */
.example1 {
animation-name: example1;
animation-duration: 4s;
}

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

在上面的例子中，通过使用关键字 “from” 和 “to” （代表 0 ％（开始）和 100 ％（完成）），我们设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25 ％，完成 50 ％ 以及动画完成 100 ％ 时更改<div>元素的背景颜色。

示例代码：

/* 动画代码 */
@keyframes example2 {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
/* 应用动画的元素 */
.example2 {
animation-name: example2;
animation-duration: 4s;
}

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

实例代码如下：

/* 动画代码 */
@keyframes example3 {
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;
}
}
/* 应用动画的元素 */
.example3 {
animation-name: example3;
animation-duration: 4s;
}

1.2延迟动画

animation-delay 属性规定动画开始的延迟时间。

示例 1 ：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
}
@keyframes example1 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example1 {
animation-name: example1;
animation-duration: 4s;
animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

示例 2 ：

@keyframes example2 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example2 {
animation-name: example2;
animation-duration: 4s;
animation-delay: -2s;
}

1.3运行次数

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

实例：

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

1.4反向或交替运行动画

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;
}

1.5速度曲线

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

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear - 规定从开始到结束的速度相同的动画
• ease-in - 规定慢速开始的动画
• ease-out - 规定慢速结束的动画

• ease-in-out - 指定开始和结束较慢的动画
• cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

div {
width: 200px;
height: 50px;
color: white;
text-align: center;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.example1 {
animation-timing-function: linear;
}
.example2 {
animation-timing-function: ease;
}
.example3 {
animation-timing-function: ease-in;
}
.example4 {
animation-timing-function: ease-out;
}
.example5 {
animation-timing-function: ease-in-out;
}

1.6填充模式

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

在不播放动画时（在开始之前，结束之后，或两者都结束时）， animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保 留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

实例：

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}

1.7简写属性

实例：

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

以上样式可以简写为：

div {
animation: example 4s linear 2s infinite alternate;
}