CSS3 animation-name属性怎么用？

　　css3animation-name属性

　　作用：animation-name属性为@keyframes动画规定名称。

　　语法：

　　animation-name:keyframename|none;

　　keyframename：规定需要绑定到选择器的keyframe的名称。

　　none：规定无动画效果（可用于覆盖来自级联的动画）。

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

　　css3animation-name属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:red;

　　position:relative;

　　animation-name:mymove;

　　animation-duration:5s;

　　/*SafariandChrome*/

　　-webkit-animation-name:mymove;

　　-webkit-animation-duration:5s;

　　}

　　@keyframesmymove

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　@-webkit-keyframesmymove/*SafariandChrome*/

　　{

　　from{left:0px;}

　　to{left:200px;}

　　}

　　</style>

　　</head>

　　<body>

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

　　<p><b>注释：</b>始终规定animation-duration属性，否则时长为0，就不会播放动画了。</p>

　　</body>

　　</html>

本文转载自中文网

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