animation-fill-mode 动画目标样式

实例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正确可用的CSS动画填充模式演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0 auto;
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .demo-container {
            margin-bottom: 20px;
            border: 1px solid #eee;
            padding: 20px;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .track {
            width: 100%;
            height: 60px;
            padding: 10px;
            background: #f0f0f0;
            border-radius: 4px;
            margin: 15px 0;
            overflow: visible;
            border: 1px dashed #ccc;
        }
        
        .box {
            width: 100px;
            height: 60px;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-weight: bold;
        }
        
        /* 动画定义 */
        @keyframes slide {
            0% {
                transform: translateX(0);
                background: #e74c3c;
            }
            100% {
                transform: translateX(500px);
                background: #2ecc71;
            }
        }
        
        /* 不同fill-mode的演示 */
        .none {
            animation: slide 2s 1s;
            -webkit-animation-fill-mode: none; /* 旧版Chrome/Safari */
  			-moz-animation-fill-mode: none;    /* 旧版Firefox */
  			animation-fill-mode: none;
        }
        
        .forwards {
            animation: slide 2s 1s;
            -webkit-animation-fill-mode: forwards; /* 旧版Chrome/Safari */
  			-moz-animation-fill-mode: forwards;    /* 旧版Firefox */
  			animation-fill-mode: forwards;
        }
        
        .backwards {
            animation: slide 2s 1s;
            -webkit-animation-fill-mode: backwards; /* 旧版Chrome/Safari */
  			-moz-animation-fill-mode: backwards;    /* 旧版Firefox */
  			animation-fill-mode: backwards;
        }
        
        .both {
            animation: slide 2s 1s;
            -webkit-animation-fill-mode: both; /* 旧版Chrome/Safari */
  			-moz-animation-fill-mode: both;    /* 旧版Firefox */
  			animation-fill-mode: both;
        }
        
        .controls {
            text-align: center;
            margin-top: 30px;
        }
        
        button {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background: #2980b9;
        }
        
        .explanation {
            background: #e8f4fc;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>CSS动画填充模式演示</h1>
    
    <div class="demo-container">
        <h2>animation-fill-mode: none (默认)</h2>
        <p>动画播放前后不应用任何样式</p>
        <div class="track">
            <div class="box none">none</div>
        </div>
    </div>
    
    <div class="demo-container">
        <h2>animation-fill-mode: forwards</h2>
        <p>动画完成后保持最后一帧的样式</p>
        <div class="track">
            <div class="box forwards">forwards</div>
        </div>
    </div>
    
    <div class="demo-container">
        <h2>animation-fill-mode: backwards</h2>
        <p>在动画延迟期间应用第一帧的样式</p>
        <div class="track">
            <div class="box backwards">backwards</div>
        </div>
    </div>
    
    <div class="demo-container">
        <h2>animation-fill-mode: both</h2>
        <p>同时应用forwards和backwards的效果</p>
        <div class="track">
            <div class="box both">both</div>
        </div>
    </div>
    
    <div class="controls">
        <button onclick="restartAnimations()">重新播放所有动画</button>
    </div>
    
    <div class="explanation">
        <h3>使用说明：</h3>
        <ul>
            <li>所有动画都有<strong>1秒延迟</strong>和<strong>2秒持续时间</strong></li>
            <li>元素将从<strong>左侧滑动到右侧</strong>，颜色从<strong>红色变为绿色</strong></li>
            <li>点击按钮可重新播放所有动画</li>
            <li>注意观察动画开始前、播放中和结束后的状态差异</li>
        </ul>
    </div>
    
    <script>
        function restartAnimations() {
            const boxes = document.querySelectorAll('.box');
            boxes.forEach(box => {
                // 重置动画
                box.style.animation = 'none';
                box.offsetHeight; // 触发重绘
                box.style.animation = '';
            });
        }
    </script>
</body>
</html>