站长百科 | 数字化技能提升教程 数字化时代生存宝典 
CSS动画是一种通过改变元素样式来创建动画效果的技术。animation用于创建复杂的动画效果，包括多个节点的设置以精确控制一个或一组动画。通过@keyframes规则，可以定义动画的关键帧，即动画的起始和结束状态，以及中间状态的变化过程。然后再通过animation属性调用这些动画，实现更丰富和灵活的效果。
一、动画属性
1、@keyframes：CSS中的一个关键帧规则，用于定义动画的关键帧，即创建动画。
2、animation：指定一组或多组动画，包括动画的名称、时长、延迟、次数、方向等各个关键参数。
3、animation-delay： 设置动画开始前的延迟时间。
4、animation-direction ：定义动画播放的方向，可以是 normal（默认，正向播放）、reverse（反向播放）或 alternate（正向和反向交替播放）。
5、animation-duration：定义动画的持续时间，即完成一次动画所花费的时间。
6、animation-fill-mode：定义动画结束后的状态，可以是 none（默认，保持最后一个关键帧状态）、forwards（延续结束状态）、backwards（回到开始状态）或 both（同时具备以上两种效果）。
7、animation-iteration-count：控制动画的播放次数，可以是 infinite（无限次）或具体的数字。
8、animation-name：设置@keyframes动画的名称。
9、animation-play-state：控制动画是否正在运行，可以是 running（默认，正在运行）、paused（暂停）或 finished（完成）。
10、animation-timing-function：规定动画的速度曲线，包括 linear（匀速）、ease（先慢后快再慢结束）等。
二、创建动画
1、使用CSS动画来创建元素在页面上移动示例：
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
2、使用CSS动画来创建元素在页面上移动并放大文本大小示例：
<html>
<head>
<title>CSS animations: Example 2</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
3、 animation-iteration-count属性控制动画的播放次数示例：
以下代码使用使动画重复无限：infinite
<html>
<head>
<title>CSS animations: Example 3</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
4、animation-direction、alternate属性设置动画在屏幕上来回移动示例：
<html>
<head>
<title>CSS animations: Example 4</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
5、animation-fill-mode 设置动画的初始或结束状态示例：
单次动画使用 forwards 设置动画结束之后使用结束后的状态作为样式。
@keyframes go{
from{
width:200px;
}
to{
width:500px
}
}
.demo{
width:100px;
height:100px;
background: #000;
animation:go 2s ease-in 1s forwards;
}
在设置延迟之后元素中使用 backwards 设置动画的开始的样式：
@keyframes go{
from{
width:200px;
}
to{
width:500px
}
}
.demo{
width:100px;
height:100px;
background: #000;
animation:go 2s ease-in 1s backwards;
}
三、浏览器兼容
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
| 9+ | 12+ | 28+ | 4+ | 6.1+ | 12.1+ | 7+ | 4.4 |
