animation-delay用于设置动画开始前的延迟时间，支持秒（s）和毫秒（ms）单位，可正可负；正值延迟启动，负值使动画从中间开始，常用于多个动画按序播放的场景，如元素依次淡入、菜单滑入等；与transition-delay不同，前者用于@keyframes动画，后者用于CSS属性过渡效果。
在CSS中，animation-delay 属性用于定义动画开始执行前的等待时间。也就是说，它控制动画从应用到元素后，延迟多久才真正开始播放。这个属性非常实用，尤其在需要按顺序展示多个动画效果时。
基本语法
animation-delay: ;
其中 可以是秒（s）或毫秒（ms）。例如：
animation-delay: 2s; —— 延迟2秒后开始动画 animation-delay: 500ms; —— 延迟500毫秒（即0.5秒）
常见应用场景
通过设置不同的延迟时间，可以让多个元素的动画依次播放，增强视觉节奏感。
立即学习“前端免费学习笔记（深入）”；
轮播提示点逐个闪烁 菜单项逐行滑入 加载动画中的波浪效果
比如有三个盒子需要依次淡入：
.animated-box {
opacity: 0;
animation: fadeIn 1s forwards;
}
.box1 { animation-delay: 0.2s; }
.box2 { animation-delay: 0.4s; }
.box3 { animation-delay: 0.6s; }
@keyframes fadeIn {
to { opacity: 1; }
}
负值的使用
你可能不知道，animation-delay 还支持负值。负延迟意味着动画会立即开始，但会从动画过程的中间某处开始播放。
Revid AI
AI短视频生成平台
96 查看详情 
例如：animation-delay: -1s; 表示动画立即开始，但跳过第一秒的内容，相当于“已经运行了1秒”。
这在循环动画中特别有用，比如让旋转动画一开始就处于旋转状态，而不是从头开始。
与 transition-delay 的区别
animation-delay 是针对 @keyframes 动画的，而 transition-delay 是用在属性过渡上的（如 hover 效果）。两者作用机制不同，不要混淆。
如果你用的是 transition: all 0.3s ease;，那应该用 transition-delay 来控制延迟。
基本上就这些。合理使用 animation-delay 能让你的页面动效更有层次感，不复杂但容易忽略细节。
以上就是css animation-delay延迟动画应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1040858.html
微信扫一扫 
支付宝扫一扫 
