css animation-delay延迟动画应用

animation-delay用于设置动画开始前的延迟时间，支持秒（s）和毫秒（ms）单位，可正可负；正值延迟启动，负值使动画从中间开始，常用于多个动画按序播放的场景，如元素依次淡入、菜单滑入等；与transition-delay不同，前者用于@keyframes动画，后者用于CSS属性过渡效果。

在CSS中，animation-delay 属性用于定义动画开始执行前的等待时间。也就是说，它控制动画从应用到元素后，延迟多久才真正开始播放。这个属性非常实用，尤其在需要按顺序展示多个动画效果时。

基本语法

animation-delay: <time>;

其中 <time> 可以是秒（s）或毫秒（ms）。例如：

• animation-delay: 2s; —— 延迟2秒后开始动画
• animation-delay: 500ms; —— 延迟500毫秒（即0.5秒）

常见应用场景

通过设置不同的延迟时间，可以让多个元素的动画依次播放，增强视觉节奏感。

立即学习“前端免费学习笔记（深入）”；

• 轮播提示点逐个闪烁
• 菜单项逐行滑入
• 加载动画中的波浪效果

比如有三个盒子需要依次淡入：

负值的使用

你可能不知道，animation-delay 还支持负值。负延迟意味着动画会立即开始，但会从动画过程的中间某处开始播放。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

例如：animation-delay: -1s; 表示动画立即开始，但跳过第一秒的内容，相当于“已经运行了1秒”。

这在循环动画中特别有用，比如让旋转动画一开始就处于旋转状态，而不是从头开始。

与 transition-delay 的区别

animation-delay 是针对 @keyframes 动画的，而 transition-delay 是用在属性过渡上的（如 hover 效果）。两者作用机制不同，不要混淆。

如果你用的是 transition: all 0.3s ease;，那应该用 transition-delay 来控制延迟。

基本上就这些。合理使用 animation-delay 能让你的页面动效更有层次感，不复杂但容易忽略细节。

以上就是css animation-delay延迟动画应用的详细内容，更多请关注php中文网其它相关文章！