css3 animation属性怎么用

　　css3animation属性

　　作用：animation属性是一个简写属性，用于设置六个动画属性。

　　语法：

　　animation:namedurationtiming-functiondelayiteration-countdirection;

　　说明：animation属性可以设置的六个动画属性分别为：

　　●animation-name：规定需要绑定到选择器的keyframe名称。

　　●animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

　　●animation-timing-function：规定动画的速度曲线。

　　●animation-delay：规定在动画开始之前的延迟。

　　●animation-iteration-count：规定动画应该播放的次数。

　　●animation-direction：规定是否应该轮流反向播放动画。

　　注：需始终设置animation-duration属性，否则当时长为0时，就不会播放动画了。

　　css3animation属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation:mymove5sinfinite;

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

　　}

　　@keyframesmymove

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　</style>

　　</head>

　　<body>

　　<p><strong>注释：</strong>InternetExplorer9以及更早的版本不支持animation属性。</p>

　　</body>

　　</html>

本文转载自中文网

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