HTML | DOM 样式 animationDelay 属性(1)

📌 相关文章

📜 HTML | DOM 样式 animationDelay 属性(1)

📅 最后修改于: 2023-12-03 15:15:36.515000 🧑 作者: Mango

HTML | DOM 样式 animationDelay 属性

HTML | DOM 样式 animationDelay 属性用于指定动画开始前的延迟时间。该属性只在 keyframes 规则中使用。

语法

animationDelay 属性的语法如下：

animation-delay: time | infinite | initial | inherit;

属性值

animationDelay 属性接受以下值：

time：要设置的动画延迟的时间，单位可以是秒(s)或毫秒(ms)。默认值是 0。
infinite：动画永远不会结束。
initial：设置此属性为它的默认值。
inherit：从父元素继承此属性。

示例

以下示例演示如何使用 animationDelay 属性：

<!DOCTYPE html>
<html>
<head>
	<title>animationDelay 属性示例</title>
	<style>
		.move {
			width: 50px;
			height: 50px;
			background-color: red;
			position: relative;
			animation-name: example;
			animation-duration: 3s;
			animation-delay: 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}

		@keyframes example {
			from {
				left: 0;
			}
			to {
				left: 200px;
			}
		}
	</style>
</head>
<body>
	<div class="move"></div>
</body>
</html>

上面的示例中，我们创建了一个红色正方形并向右移动，而延迟时间为 2 秒。动画持续时间为 3 秒并循环播放。

浏览器支持

animationDelay 属性得到了所有主流浏览器的支持。

结论

animationDelay 属性可用于在 CSS 中为动画添加延迟，允许您精确控制动画的运行方式。它是用于创建令人惊叹的 CSS 动画的强大属性之一。