css3 animation属性怎么用

2024-01-17 13:27 小编

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>

<div></div>

</body>

</html>


image.png


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码