CSS - animation-delay 属性

CSS animation-delay 属性确定启动动画所花费的时间。它以秒或毫秒为单位指定。

正值会引入时间延迟，而负值会更早地开始动画，在上述持续时间内播放。零表示没有延迟，动画立即开始。

语法


animation-delay: time | initial | inherit;

属性值

值	描述
time	以秒或毫秒为单位指定。可以使用正值和负值。正值会引入时间延迟。负值使动画在上述时间内显示为正在播放。零表示立即播放，是默认值。这是一个可选字段。
initial	这会将属性设置为其初始值
inherit	这将继承父元素的属性

CSS animation-delay 属性示例

下面列出的示例将说明 animation-delay 属性

为动画设置无延迟

在这个例子中，考虑了一个没有延迟的盒子。盒子向前进方向移动，没有任何延迟。

例


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 @keyframes slideIn {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(-100%);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 }

	 	 	 	 .animated-box {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 	 	 background-color: #edb753;
	 	 	 	 	 	 color: #fff;
	 	 	 	 	 	 animation: slideIn;
	 	 	 	 	 	 animation-duration: 3s;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h3>CSS animation-delay Property</h3>
	 	 <div class="animated-box">
	 	 	 	 Animation without Delay
	 	 </div><br>

</html>

为动画设置正时间延迟

在这个例子中，我们考虑一个具有正时间延迟的盒子。盒子在 2 秒后开始向前移动，因为施加的延迟为 2 秒

例


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 @keyframes slideIn {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(-100%);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 }

	 	 	 	 .animated-box {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 	 	 background-color: #edb753;
	 	 	 	 	 	 color: #fff;
	 	 	 	 	 	 animation: slideIn;
	 	 	 	 	 	 animation-duration: 2s;
	 	 	 	 }

	 	 	 	 .animated-box-delayed {
	 	 	 	 	 	 animation-delay: 2s;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h3>CSS animation-delay Property</h3>
	 	 <div class="animated-box animated-box-delayed">
	 	 	 	 Animation with Postitive Delay
	 	 </div><br>

</html>

为动画设置负时间延迟

在这个例子中，我们考虑一个具有负时间延迟的盒子。按照规定，盒子似乎已经移动了 1 秒。

例


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 @keyframes slideIn {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 transform: translateX(-100%);
	 	 	 	 	 	 }
	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 }

	 	 	 	 .animated-box {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 	 	 background-color: #edb753;
	 	 	 	 	 	 color: #fff;
	 	 	 	 	 	 animation: slideIn;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 }

	 	 	 	 .animated-box-delayed {
	 	 	 	 	 	 animation-delay: -1s;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h3>CSS animation-delay Property</h3>
	 	 <div class="animated-box animated-box-delayed">
	 	 	 	 Animation with Negative Delay
	 	 </div><br>

</html>

支持的浏览器

属性
animation-delay	43.0	10.0	16.0	9.0	30.0

打印本页