例
做一个元素移动逐渐下降200像素：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
试一试» 更多"Try it Yourself"下面的例子。
定义和用法
该@keyframes规则指定动画代码。
动画是由一组CSS样式到另一个逐渐改变创建。
在动画，可以改变设置的CSS样式很多次。
指定当风格变化会发生在百分之，或用关键字"from"和"to" ，这是一样的0％和100％。 0％是动画开始，在动画完成的时候是100％。
提示：为了获得最佳的浏览器支持，你应该总是同时定义为0％和100％的选择。
Note:使用动画属性来控制动画的外观，并且还向动画选择器结合。
浏览器支持
在表中的数字规定，完全支持该规则的第一个浏览器版本。
其次是-webkit-，-moz-数字或-O-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -O- |
CSS语法
@keyframesanimationname {keyframes-selector {css-styles;}}属性值
| 值 | 描述 |
|---|---|
| animationname | 需要。 定义动画的名称。 |
| keyframes-selector | 需要。 动画持续时间的百分比。 合法值： 0-100％ Note:您可以有很多的关键帧，选择在一个动画。 |
| css-styles | 需要。 一个或多个法律CSS样式属性 |
更多示例
例
添加关键帧很多在选择一个动画：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
试一试» 例
改变许多CSS样式于一体的动画：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
试一试» 例
许多关键帧选择与许多CSS样式：
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
试一试» 相关页面
CSS3教程： CSS3动画