animation-duration

版本：CSS3

animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。使用简写属性animation很方便地同时设置所有的动画属性。

示例

animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

浏览器支持


IE10以上版本的浏览器都支持`animation-duration`

语法

animation-duration:<time>

取值：

<time>一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s。

默认值	0s
适用于	所有元素，包含伪对象`::before`and`::after`
继承性	无
动画性	否
计算值	指定值
媒体	交互

实例

<style type="text/css">
div{
	width:100px;
	height:100px;
	position:relative;
	background-color:hsl(120,65%,75%);
	animation:demo infinite;
	-webkit-animation:demo infinite;
	animation-duration:5s;
	-webkit-animation-duration:5s;
}
@keyframes demo
{
	from{left:0px;}
	to{left:450px;}
}
/*safari和chrome*/
@-webkit-keyframes demo
{
	from{left:0px;}
	to{left:450px;}
}
</style>
</head>
<body>
	<div></div>	
</body>
</html>

效果图：