CSS3 animation-delay 属性

#CSS3 animation-delay 属性

CSS3 animation-delay 属性用于设置 CSS3 动画开始的延迟时间，它与 animation 属性一起被使用。

基本语法

animation-delay 属性的基本语法如下所示：

animation-delay: time | initial | inherit;

值

• time：指定动画的延迟时间，单位为秒（s）或毫秒（ms），默认值为 0s。
• initial：指定该属性的初始值。
• inherit：从父元素继承该属性的值。

示例

以下是一些示例，展示了如何使用 animation-delay 属性：

/* 将动画启动延迟 2 秒钟 */
animation-delay: 2s;

/* 使用百分比指定动画启动延迟时间 */
animation-delay: 50%;

/* 使用多个值，每个值对应每个关键帧 */
animation-delay: 2s, 5s, 10s;

总结

CSS3 animation-delay 属性用于设置动画开始的延迟时间。通过在 animation 属性中使用它，可以为元素添加更加生动的动画效果。它接受时间或百分比作为参数，也可以使用多个值分别对应每个关键帧。本属性在实现动画控制时具有重要的作用，同时也是 Web 开发者必须掌握的一项技能。