CSS动画属性 - 站长百科

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