animation-delay 动画延迟

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-delay 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .demo-container {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .element {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        /* 演示1: 延迟1秒后开始动画 */
        .demo1 .element {
            animation: slideRight 2s ease-in-out;
            animation-delay: 1s;
        }
        
        /* 演示2: 延迟500毫秒后开始动画 */
        .demo2 .element {
            animation: slideRight 2s ease-in-out;
            animation-delay: 500ms;
        }
        
        /* 演示3: 负值延迟，动画立即开始但从中间开始播放 */
        .demo3 .element {
            animation: slideRight 4s ease-in-out infinite;
            animation-delay: -2s;
        }
        
        /* 演示4: 多动画延迟设置 */
        .demo4 .element {
            animation-name: slideRight, fade;
            animation-duration: 2s, 3s;
            animation-delay: 0s, 1s; /* slide立即开始，fade延迟1秒 */
            animation-iteration-count: 1, 1;
        }
        
        /* 动画定义 */
        @keyframes slideRight {
            from { transform: translateX(0); }
            to { transform: translateX(200px); }
        }
        
        @keyframes fade {
            from { opacity: 1; }
            to { opacity: 0.2; }
        }
        
        .code {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>CSS animation-delay 演示</h1>
    
    <div class="demo-container demo1">
        <h2>1. 延迟1秒后开始动画</h2>
        <div class="code">
.element {
    animation: slideRight 2s ease-in-out;
    animation-delay: 1s;
}
        </div>
        <div class="element">1s 延迟</div>
        <p>绿色方块将在1秒延迟后开始向右滑动。</p>
    </div>
    
    <div class="demo-container demo2">
        <h2>2. 延迟500毫秒后开始动画</h2>
        <div class="code">
.element {
    animation: slideRight 2s ease-in-out;
    animation-delay: 500ms;
}
        </div>
        <div class="element">500ms 延迟</div>
        <p>绿色方块将在500毫秒延迟后开始向右滑动。</p>
    </div>
    
    <div class="demo-container demo3">
        <h2>3. 负值延迟 (-2s)</h2>
        <div class="code">
.element {
    animation: slideRight 4s ease-in-out infinite;
    animation-delay: -2s;
}
        </div>
        <div class="element">-2s 延迟</div>
        <p>绿色方块将立即开始动画，但从动画的中间开始播放（因为4秒动画的-2s延迟相当于从50%处开始）。</p>
    </div>
    
    <div class="demo-container demo4">
        <h2>4. 多动画延迟设置</h2>
        <div class="code">
.element {
    animation-name: slideRight, fade;
    animation-duration: 2s, 3s;
    animation-delay: 0s, 1s; /* slide立即开始，fade延迟1秒 */
    animation-iteration-count: 1, 1;
}
        </div>
        <div class="element">多动画</div>
        <p>绿色方块将立即开始向右滑动，同时淡出效果将在1秒延迟后开始。</p>
    </div>
</body>
</html>