CSS - animation-duration 属性

CSS animation-duration 属性定义了动画完成单个周期所需的时间。

语法


animation-delay: time | initial | inherit;

属性值

值	描述
time	以秒或毫秒为单位指定。这指定了动画完成一个周期所需的长度。
initial	这会将属性设置为其初始值
inherit	这将继承父元素的属性

CSS animation-duration 属性示例

下面列出的示例将说明具有不同值的动画持续时间属性。

设置动画持续时间

以下示例演示如何使用 animation-duration 属性创建具有指定持续时间的简单动画。

动画持续时间为 0 秒

当 animation-duration 属性的持续时间设置为 0s 时，不会发生动画。在以下示例中，由于持续时间设置为 0s，因此考虑的红色框保持静止


	
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: red;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 animation-name: move;
	 	 	 	 	 	 animation-duration: 0s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 left: 0;
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 left: 400px;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Duration Property</h2>
	 	 <div class="box"></div>
</body>

</html>

积极的动画持续时间

当 animation-duration 属性的持续时间设置为正值时，动画需要很长时间才能完成一个周期。在考虑的示例中，红框需要 5 秒才能完成一个周期。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: red;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 animation-name: move;
	 	 	 	 	 	 animation-duration: 10s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-direction: alternate;
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 left: 0;
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 left: 400px;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS Animation Duration Property</h2>
	 	 <div class="box"></div>
</body>

</html>

支持的浏览器

浏览器
animation-duration	43	10.0	16.0	9.0	30.0

打印本页