css animation-delay如何设置动画延迟

animation-delay用于设置动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。默认值为0s，表示动画立即开始；正值如1.5s表示延迟1.5秒后启动；负值如-1s表示立即开始但跳过前1秒内容，常用于让动画从中间状态切入。支持多个延迟时间，用逗号分隔，对应多个动画名称，实现复杂的时间控制。可单独设置或在animation复合属性中简写，合理使用可增强页面动效节奏感。

在CSS中，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 复合属性中：

.element {
  animation: fadeIn 1s 1.5s;
}

负延迟的用法

设置负值可以让动画“提前开始”，比如：

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

158

查看详情

这表示动画立即开始，但会从第1秒处开始播放（相当于跳过前1秒的内容），常用于让动画更快进入状态。

多动画延迟设置

如果一个元素有多个动画，可以分别为它们设置不同的延迟：

这里第一个动画立即开始，第二个延迟1秒开始。

基本上就这些，合理使用 animation-delay 能让页面动效更有节奏感。

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