animation-delay用于设置动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。默认值为0s，表示动画立即开始；正值如1.5s表示延迟1.5秒后启动；负值如-1s表示立即开始但跳过前1秒内容，常用于让动画从中间状态切入。支持多个延迟时间，用逗号分隔，对应多个动画名称，实现复杂的时间控制。可单独设置或在animation复合属性中简写，合理使用可增强页面动效节奏感。
在CSS中，animation-delay 用于设置动画开始前的延迟时间。也就是说，它定义了从元素加载完成到动画真正开始播放之间等待的时间。
基本语法
animation-delay: 时间值;
时间单位可以是秒（s）或毫秒（ms）。常见取值如下：
0s：默认值，动画立即开始2s：延迟2秒后开始动画500ms：延迟0.5秒开始-1s：负值表示动画立即开始，但会从动画过程的中间开始播放
多个延迟时间可以用逗号分隔，对应多个动画（当设置了多个 animation-name 时）。
使用示例
以下是一个简单的淡入动画，延迟1.5秒后开始：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 1.5s;
}
也可以简写在 animation 复合属性中：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
.element {
animation: fadeIn 1s 1.5s;
}
负延迟的用法
设置负值可以让动画“提前开始”，比如：
.element {
animation: slideIn 2s -1s;
}
这表示动画立即开始，但会从第1秒处开始播放（相当于跳过前1秒的内容），常用于让动画更快进入状态。
多动画延迟设置
如果一个元素有多个动画，可以分别为它们设置不同的延迟：
.element {
animation: fadeIn 2s ease, moveRight 3s linear;
animation-delay: 0s, 1s;
}
这里第一个动画立即开始，第二个延迟1秒开始。
基本上就这些，合理使用 animation-delay 能让页面动效更有节奏感。
以上就是css animation-delay如何设置动画延迟的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1020022.html
微信扫一扫 
支付宝扫一扫 
