css animation delay CSS3 animation-delay 属性

css animation delay

CSS animation delay 是一个非常有用的功能，它可以让你控制动画的开始时间。它可以让你在一个动画中添加多个元素，并且可以让你控制每个元素的开始时间。

CSS animation delay 属性是一个数字，表示在开始执行动画之前要延迟多长时间。它可以使用秒或毫秒来衡量，例如：

animation-delay: 2s;

这将会延迟2秒后才开始执行动画。你也可以使用小数来衡量，例如：

animation-delay: 0.5s;

这将会延迟0.5秒后才开始执行动画。当然，你也可以使用负数来做到相反的效果，即在动画开始之前就立即执行它。例如：

animation-delay: -1s;

这将会立即开始执行动画而不需要延迟1秒。此外，CSS animation delay 还有一些其他有趣的应用场景。例如，你可以使用它来创建循环动画或者是创建多重循环的动画效果。

例如，你可以使用 animation-delay 属性来创建一个循环的气泡特效。首先，你需要定义一个气泡元素并添加一些样式来让它看起来像气泡。然后你需要使用 animation-delay 属性来让气泡在不同时间出现并淡出。最后，你需要将 animation-iteration-count 设置为 infinite 来让气泡循环出现并淡出。

此外，CSS animation delay 还可以帮助我们创造出多重循环的特效。例如，我们可以使用 animation-delay 属性来创造出一个不断重复的三重循环特效。首先我们需要定义三个不同的元素并添加样式来使它看起来有三重循环的感觉。然后我们需要使用 animation-delay 属性来把三个元素都放在不同时间上并把 animation-iteration-count 设置为 infinite 来保证三重循环特效不断重复出现并淡出.

CSS3 animation-delay 属性

定义和用法

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationDelay="2s"

---

语法

animation-delay: time;

值	描述	测试
time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0	测试 »

---

实例

实例

等待两秒，然后开始动画：

animation-delay:2s;-webkit-animation-delay:2s;

实例

负值，请注意动画跳过 2 秒进入动画周期：

animation-delay: -2s
-moz-animation-delay: -2s
-webkit-animation-delay: -2s

---

浏览器支持

animation-delay	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

---

相关文章

CSS3 教程: CSS3 动画