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 开发者必须掌握的一项技能。