使用 animation-delay 属性可设置CSS动画的延迟时间，支持秒或毫秒单位，正值延迟开始，负值从中间启动，配合 keyframes 定义动画，简写形式更推荐，多个动画可用逗号分隔延迟值，提升动效节奏与体验。
在CSS中设置动画延迟，使用 animation-delay 属性即可控制动画开始执行的时间。这个属性定义了从应用动画到真正开始播放之间的等待时间。
基本语法
animation-delay 的值可以是秒（s）或毫秒（ms），支持正数和负数：
• 正数值：动画会在指定时间后开始
• 负数值：动画立即开始，但会从动画序列的中间位置启动，相当于“倒带”效果
• 多个值：当为多个动画设置延迟时，用逗号分隔
示例：
.element { animation-name: slide; animation-duration: 2s; animation-delay: 1s; /* 动画将在1秒后开始 */}
配合 keyframes 使用
先定义一个关键帧动画：
立即学习“前端免费学习笔记（深入）”；
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); }}
再给元素添加延迟：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
.box { animation: slide 2s ease-in-out; animation-delay: 0.5s;}
多个动画的延迟设置
如果一个元素有多个动画，可以分别为它们设置不同的延迟：
.multiple-animations { animation: fadeIn 2s, moveRight 3s; animation-delay: 0.5s, 1s; /* 第一个动画延迟0.5秒，第二个延迟1秒 */}
简写形式（推荐）
通常将 animation-delay 写在 animation 简写属性中：
.element { animation: slide 2s 1s ease-in-out; /* 动画名 | 持续时间 | 延迟 | 缓动函数 */}
注意顺序：animation: name duration delay timing-function fill-mode …
基本上就这些。合理使用 animation-delay 可以让页面动效更有节奏感，比如实现逐项出现的动画效果，提升用户体验。
以上就是如何用css设置animation-delay延迟效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999984.html
微信扫一扫 
支付宝扫一扫 
