@keyframes概述：要定义动画，请在animation-name中使用在@keyframes中定义的动画名称。

定义和使用标签

可以使用@keyframes规则创建动画。

通过逐步更改CSS样式设置来创建动画。

在动画期间，可以多次更改CSS样式设置。

使用与%或0%到100%相同的关键字“从”和“到”指定何时发生更改。

0%是动画的开始，100%是动画完成时。

要获得最好的浏览器支持，必须始终以0%和100%定义选择器。

注意：使用animation属性控制动画的外观，并使用选择器绑定动画。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

例子：

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

相关连接： 网站源码 企业网站源码