CSS3 animation-delay 属性详解

核心知识点

animation-delay 属性概述

animation-delay 是 CSS3 中的一个动画属性，用于指定动画开始前的延迟时间。它允许开发者控制动画何时开始执行，而不是立即开始。

animation-delay 属性语法

animation-delay: time;

其中：

time：指定动画开始前的延迟时间，单位可以是秒（s）或毫秒（ms）
默认值为 0s，表示动画立即开始
可以使用负值，表示动画从中间开始执行

animation-delay 属性取值

值	描述
`<time>`	动画开始前的延迟时间，可以是秒（s）或毫秒（ms），如 `1s`、`500ms`
`0s`	默认值，表示动画立即开始
`-<time>`	负值，表示动画从中间开始执行，跳过指定的时间

实用案例分析

基本使用示例

示例 1：不同延迟时间的动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 animation-delay 基本示例</title>
    <style>
        /* 定义关键帧 */
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* 应用不同延迟时间的动画 */
        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            display: inline-block;
            animation-name: slideIn;
            animation-duration: 1s;
            animation-timing-function: ease-out;
        }
        
        /* 无延迟 */
        .box1 {
            background-color: #3498db;
            animation-delay: 0s;
        }
        
        /* 0.5秒延迟 */
        .box2 {
            background-color: #e74c3c;
            animation-delay: 0.5s;
        }
        
        /* 1秒延迟 */
        .box3 {
            background-color: #2ecc71;
            animation-delay: 1s;
        }
        
        /* 1.5秒延迟 */
        .box4 {
            background-color: #f39c12;
            animation-delay: 1.5s;
        }
    </style>
</head>
<body>
    <div class="box box1">0s</div>
    <div class="box box2">0.5s</div>
    <div class="box box3">1s</div>
    <div class="box box4">1.5s</div>
</body>
</html>

效果说明：

定义了一个名为 slideIn 的关键帧动画，实现元素从左侧滑入的效果
为四个 .box 元素应用了相同的动画，但设置了不同的 animation-delay 值
可以观察到，延迟时间越长的元素，开始动画的时间越晚

示例 2：负值延迟时间

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 animation-delay 负值示例</title>
    <style>
        /* 定义关键帧 */
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* 应用动画 */
        .box {
            width: 100px;
            height: 100px;
            margin: 20px;
            display: inline-block;
            animation-name: slideIn;
            animation-duration: 2s;
            animation-timing-function: ease-out;
        }
        
        /* 无延迟 */
        .box1 {
            background-color: #3498db;
            animation-delay: 0s;
        }
        
        /* 负值延迟 - 从中间开始 */
        .box2 {
            background-color: #e74c3c;
            animation-delay: -1s;
        }
        
        /* 负值延迟 - 从接近结束开始 */
        .box3 {
            background-color: #2ecc71;
            animation-delay: -1.5s;
        }
    </style>
</head>
<body>
    <div class="box box1">0s</div>
    <div class="box box2">-1s</div>
    <div class="box box3">-1.5s</div>
</body>
</html>

效果说明：

定义了一个名为 slideIn 的关键帧动画，实现元素从左侧滑入的效果
为三个 .box 元素应用了相同的动画，但设置了不同的 animation-delay 值
可以观察到，使用负值延迟的元素会从动画的中间部分开始执行，就像动画已经运行了指定的时间一样

实际应用场景

场景 1：元素依次入场动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 元素依次入场动画</title>
    <style>
        /* 定义入场动画关键帧 */
        @keyframes fadeInUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 应用动画 */
        .item {
            padding: 20px;
            margin: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
            animation-name: fadeInUp;
            animation-duration: 0.5s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
        
        /* 不同延迟的动画 */
        .item1 {
            background-color: #3498db;
            color: white;
            animation-delay: 0s;
        }
        
        .item2 {
            background-color: #e74c3c;
            color: white;
            animation-delay: 0.1s;
        }
        
        .item3 {
            background-color: #2ecc71;
            color: white;
            animation-delay: 0.2s;
        }
        
        .item4 {
            background-color: #f39c12;
            color: white;
            animation-delay: 0.3s;
        }
        
        .item5 {
            background-color: #9b59b6;
            color: white;
            animation-delay: 0.4s;
        }
    </style>
</head>
<body>
    <div class="item item1">项目 1</div>
    <div class="item item2">项目 2</div>
    <div class="item item3">项目 3</div>
    <div class="item item4">项目 4</div>
    <div class="item item5">项目 5</div>
</body>
</html>

效果说明：

定义了一个名为 fadeInUp 的关键帧动画，实现元素从下方淡入的效果
为五个 .item 元素应用了相同的动画，但设置了不同的 animation-delay 值
通过设置递增的延迟时间，实现了元素依次从下往上淡入的效果，创造出层次感和流畅的视觉体验

场景 2：交互触发的延迟动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 交互触发的延迟动画</title>
    <style>
        /* 定义按钮悬停动画关键帧 */
        @keyframes btnHover {
            from {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(52, 152, 219, 0);
            }
            to {
                transform: scale(1.05);
                box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
            }
        }
        
        /* 定义提示框动画关键帧 */
        @keyframes tooltipShow {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 按钮样式 */
        .btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            position: relative;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;
        }
        
        /* 按钮悬停动画 */
        .btn:hover {
            animation-name: btnHover;
            animation-delay: 0s;
        }
        
        /* 提示框样式 */
        .tooltip {
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;
        }
        
        /* 提示框显示动画 */
        .btn:hover .tooltip {
            animation-name: tooltipShow;
            animation-delay: 0.5s; /* 延迟显示提示框 */
        }
    </style>
</head>
<body>
    <button class="btn">
        悬停我
        <span class="tooltip">这是一个提示</span>
    </button>
</body>
</html>

效果说明：

定义了两个关键帧动画：btnHover（按钮悬停效果）和 tooltipShow（提示框显示效果）
按钮悬停时立即触发 btnHover 动画，使按钮轻微放大并添加阴影
提示框在按钮悬停 0.5 秒后才开始显示动画，避免了用户不小心悬停时立即显示提示框的情况

场景 3：复杂动画序列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 复杂动画序列</title>
    <style>
        /* 定义旋转动画关键帧 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* 定义缩放动画关键帧 */
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* 定义淡入动画关键帧 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* 容器样式 */
        .container {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 50px auto;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        /* 中心元素 */
        .center {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation-name: scale;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        
        /* 卫星元素 */
        .satellite {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        /* 卫星 1 */
        .satellite1 {
            background-color: #e74c3c;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            animation-name: rotate;
            animation-delay: 0s;
        }
        
        /* 卫星 2 */
        .satellite2 {
            background-color: #2ecc71;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            animation-name: rotate;
            animation-delay: 1s;
        }
        
        /* 卫星 3 */
        .satellite3 {
            background-color: #f39c12;
            left: 10%;
            top: 50%;
            transform: translateY(-50%);
            animation-name: rotate;
            animation-delay: 2s;
        }
        
        /* 文字元素 */
        .text {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            font-weight: bold;
            color: #333;
            opacity: 0;
            animation-name: fadeIn;
            animation-duration: 1s;
            animation-delay: 3s;
            animation-fill-mode: forwards;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
        <div class="satellite satellite1"></div>
        <div class="satellite satellite2"></div>
        <div class="satellite satellite3"></div>
        <div class="text">复杂动画序列示例</div>
    </div>
</body>
</html>

效果说明：

定义了三个关键帧动画：rotate（旋转）、scale（缩放）和 fadeIn（淡入）
中心元素执行缩放动画，持续 2 秒，无限重复
三个卫星元素分别执行旋转动画，但设置了不同的 animation-delay 值，使它们的旋转错开
文字元素在动画开始 3 秒后才开始淡入，形成一个完整的动画序列

代码优化建议

延迟时间选择
- 对于元素依次入场的动画，建议使用较小的延迟时间间隔（如 0.1-0.2 秒），以创造流畅的视觉效果
- 对于需要用户交互触发的动画，如提示框，可以使用稍长的延迟时间（如 0.5 秒），以避免误触发
负值延迟的使用
- 负值延迟可以使动画从中间开始执行，适用于需要立即显示动画效果但又不想从头开始的场景
- 例如，当页面加载时，你可能希望元素已经处于动画的中间状态，而不是从初始状态开始
动画协调
- 当多个元素执行动画时，合理设置延迟时间可以创造出协调的视觉效果
- 可以使用递增的延迟时间来创建元素依次动画的效果，也可以使用不同的延迟时间来创造出层次感
性能考虑
- 虽然 animation-delay 本身不会直接影响性能，但过多的动画元素可能会导致页面性能下降
- 对于复杂的动画序列，建议使用 requestAnimationFrame 或其他优化技术来确保流畅性
兼容性处理
- 虽然现代浏览器已经广泛支持 CSS3 动画，但为了兼容旧版浏览器，可以添加浏览器前缀
- 例如：-webkit-animation-delay、-moz-animation-delay、-o-animation-delay

总结

animation-delay 属性是 CSS3 动画系统中的一个重要组成部分，它用于控制动画的开始时间。通过合理设置 animation-delay 属性的值，开发者可以创建出各种复杂的动画序列和交互效果，从简单的元素依次入场到复杂的交互式动画。

在实际开发中，建议根据具体的动画需求和场景选择合适的延迟时间，并结合其他动画属性（如 animation-duration、animation-timing-function 等），创建出符合用户体验的动画效果。同时，要注意性能优化，避免过多的动画元素导致页面性能下降。