CSS 动画
CSS 动画
CSS 允许在不使用 JavaScript 的情况下为 HTML 元素制作动画！
在本章中，您将学习以下属性
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
动画的浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
什么是 CSS 动画？
动画让元素从一种样式逐渐变为另一种样式。
您可以根据需要多次更改任意数量的 CSS 属性。
要使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间将具有的样式。
@keyframes 规则
当您在 @keyframes 规则中指定 CSS 样式时，动画将在特定时间从当前样式逐渐变为新样式。
要使动画生效，您必须将动画绑定到一个元素上。
以下示例将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒，它将逐渐将 <div> 元素的背景颜色从 "red" 更改为 "yellow"。
示例
/* 动画代码 */
@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% 时更改 <div> 元素的背景颜色。
示例
/* 动画代码 */
@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: alternate;
}
自己动手试一试 »
以下示例使用值 "alternate-reverse" 使动画先向后运行，然后向前运行。
示例
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
自己动手试一试 »
指定动画的速度曲线
animation-timing-function 属性指定动画的速度曲线。
animation-timing-function 属性可以具有以下值：
ease- 指定一个动画，开始慢，然后快，最后慢（这是默认值）。linear- 指定一个从头到尾速度相同的动画。ease-in- 指定一个慢速开始的动画。ease-out- 指定一个慢速结束的动画。ease-in-out- 指定一个慢速开始和结束的动画。cubic-bezier(n,n,n,n)- 允许您在三次贝塞尔函数中定义自己的值。
以下示例显示了一些可以使用的不同速度曲线。
示例
#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- 元素将保留由最后一个关键帧设置的样式值（取决于 animation-direction 和 animation-iteration-count）。backwards- 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在 animation-delay 期间保留此样式。both- 动画将同时遵循 forwards 和 backwards 的规则，将动画属性在两个方向上扩展。
以下示例让 <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: backwards;
}
自己动手试一试 »
以下示例让 <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: alternate;
}
自己动手试一试 »
使用简写 animation 属性可以实现与上面相同的动画效果。
CSS 动画属性
下表列出了 @keyframes 规则和所有 CSS 动画属性。
| 属性 | 描述 |
|---|---|
| @keyframes | 指定动画代码 |
| animation | 用于设置所有动画属性的简写属性 |
| animation-delay | 指定动画开始前的延迟 |
| animation-direction | 指定动画应向前、向后还是交替播放 |
| animation-duration | 指定动画完成一个周期所需的时间 |
| animation-fill-mode | 指定当动画未播放时（开始前、结束后或两者兼有）元素的样式 |
| animation-iteration-count | 指定动画应播放的次数 |
| animation-name | 指定 @keyframes 动画的名称 |
| animation-play-state | 指定动画是正在运行还是已暂停 |
| animation-timing-function | 指定动画的速度曲线 |
