@keyframes是什么

　　css@keyframes

　　作用：通过@keyframes规则，您能够创建动画。

　　说明：

　　创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套CSS样式。以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义0%和100%选择器。

　　注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

　　css@keyframes的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove5sinfinite;

　　-moz-animation:mymove5sinfinite;/*Firefox*/

　　-webkit-animation:mymove5sinfinite;/*SafariandChrome*/

　　-o-animation:mymove5sinfinite;/*Opera*/

　　}

　　@keyframesmymove

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-moz-keyframesmymove/*Firefox*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　@-o-keyframesmymove/*Opera*/

　　{

　　0%{top:0px;}

　　25%{top:200px;}

　　75%{top:50px}

　　100%{top:100px;}

　　}

　　</style>

　　</head>

　　<body>

　　<p><b>注释：</b>本例在InternetExplorer中无效。</p>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56296.shtml