srcmini本文概述
CSS Animation属性用于在网页上创建动画。它可以替代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>
评论前必须登录！
注册