html5 css3在线生成,CSS 动画

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到

元素。动画将持续 4 秒钟，同时将

元素的背景颜色从 "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％ 时更改

元素的背景颜色：

实例

/* 动画代码 */

@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％ 时更改背景颜色和

元素的位置：

实例

/* 动画代码 */

@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;

}