CSS 动画
CSS动画属性用于
在网页上创建动画。它可以替代Flash和JavaScript创建的动画。
CSS3 @keyframes规则
动画是在@keyframe规则中创建的。它用于控制CSS动画序列中的中间步骤。
动画的作用
动画
使元素逐渐从一种样式更改为。您可以添加要添加的属性。您还可以指定百分比的变化。0％指定动画的开始，而100％指定动画的完成。
CSS动画的工作方式
动画时是在@keyframe规则中创建的，必须与选择器绑定；否则动画将无效。
可以通过至少指定以下两个属性将动画绑定到选择器：
动画名称
动画的持续时间
CSS动画属性
| 属性 |
说明 |
| @keyframes |
它用于指定动画。 |
| animation |
这是一个简写属性，用于设置除animation-play-state和animation-fill-mode属性之外的所有属性。 |
| animation-delay |
它指定动画何时开始。 |
| animation-direction |
它指定动画是否应在备用周期中保留播放。 |
| animation-duration |
它指定动画完成一个周期所花费的时间。 |
| animation-fill-mode |
它指定元素的静态样式。 （当动画不播放时） |
| animation-iteration-count |
它指定动画播放的次数。 |
| animation-play-state |
它指定动画是正在运行还是暂停。 |
| animation-name |
它指定@keyframes动画的名称。 |
| animation-timing-function |
它指定动画的速度曲线。 |
CSS动画示例：更改背景颜色
让我们看一个简单的CSS动画示例，该示例将矩形的背景颜色从RED更改为BLACK。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>
<div></div>
</body>
</html>
输出
CSS动画示例：移动矩形
让我们再举一个示例来显示具有百分比值的动画。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:200px; top:300px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:300px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
<div></div>
</body>
</html>
输出
