DEV Community
·
掌握CSS `animation-delay` 属性：实用备忘单
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
CSS中的animation-delay属性用于控制动画开始的时间，支持正值、负值和零延迟。正值延迟动画开始，负值使动画立即开始但看似已运行一段时间，零延迟则立即开始。该属性在现代浏览器中得到广泛支持，是创建动态用户体验的重要工具。
🎯
关键要点
- animation-delay属性用于控制动画开始的时间。
- 该属性的基本语法为：animation-delay: time | initial | inherit。
- 正值延迟动画开始，负值使动画立即开始但看似已运行一段时间，零延迟则立即开始。
- 正值延迟示例：animation-delay: 2s; 表示动画在2秒后开始。
- 负值延迟示例：animation-delay: -1s; 表示动画立即开始，仿佛已运行1秒。
- 零延迟示例：animation-delay: 0s; 表示动画立即开始。
- 可以为多个动画指定不同的延迟，例如：animation-delay: 1s, 2s;。
- 实际示例包括简单延迟、错落动画和负延迟效果。
- animation-delay属性在现代浏览器中得到广泛支持，包括Chrome、Firefox、Safari、Edge和Opera。
- 掌握animation-delay属性可以提升用户体验，创造更具吸引力的动态效果。
❓
延伸问答
CSS中的animation-delay属性有什么作用？
animation-delay属性用于控制动画开始的时间，可以设置为正值、负值或零延迟。
如何使用正值设置animation-delay？
使用正值可以延迟动画的开始，例如：animation-delay: 2s;表示动画在2秒后开始。
负值的animation-delay有什么效果？
负值使动画立即开始，但看似已运行一段时间，例如：animation-delay: -1s;表示动画立即开始，仿佛已运行1秒。
animation-delay属性在浏览器中的支持情况如何？
animation-delay属性在现代浏览器中得到广泛支持，包括Chrome、Firefox、Safari、Edge和Opera。
如何为多个动画设置不同的延迟？
可以为多个动画指定不同的延迟，例如：animation-delay: 1s, 2s;表示第一个动画在1秒后开始，第二个在2秒后开始。
animation-delay属性的基本语法是什么？
基本语法为：animation-delay: time | initial | inherit;，其中time可以是秒或毫秒。
➡️
