利用CSS延遲動畫，打造令人驚豔的複雜動畫效果！詳情 - 前端,css3動畫,css3 鄧佔勇動態日志

動態

詳情

利用CSS延遲動畫，打造令人驚豔的複雜動畫效果！ - 動態詳情

06:26 上午 · 11月 04 ,2025

動畫在前端開發中是經常遇到的場景之一，加入動畫後頁面可以極大的提升用户體驗。

絕大多數簡單的動畫場景可以直接通過CSS實現，對於一些特殊場景的動畫可能會使用到JS計算實現，通過本文的學習，可以讓你在一些看似需要使用JS實現的動畫場景，使用純CSS一樣可以實現，並且更方便快捷。

先看一個簡單的例子：一個方塊的位置隨着滑條滑動的位置改變
在這裏插入圖片描述

這個場景實現起來很簡單，滑條值改變後，使用JS計算方塊應該移動的距離，然後將方塊定位到指定位置即可。代碼如下：

.box {
height: 50px;
width: 50px;
    background-color: aquamarine;
}
<div class="box"></div>
<input type="range" min="0" max="1" step="0.01"/>

<script>
const input = document.querySelector("input");
    const box = document.querySelector(".box");
    input.addEventListener('input', (e) => {
const value = e.target.value;
        box.style.transform = `translateX(${200 * value}px)`;
    })
</script>

現在稍微增加一些動畫效果：

方塊在中間位置時縮放為原來的一半大小
方塊在中間位置時變成球形
方塊從紅色變為綠色

在這裏插入圖片描述

對於大小和圓角，同樣可以使用簡單的JS進行計算實現，但是對於顏色變化，使用JS計算將會是一個非常複雜的過程。

先拋開動畫跟隨滑條運動這個要求，如果使用CSS實現上面從0-1的動畫過程是一個很簡單的事：
在這裏插入圖片描述

.box {
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
    animation: run 1s linear forwards;
}
@keyframes run {
    0% {
transform: translateX(0) scale(1);
border-radius: 0%;
background: red;
    }
    50% {
transform: translateX(100px) scale(.5);
border-radius: 50%;
    }
    100% {
transform: translateX(200px) scale(1);
border-radius: 0%;
background: green;
    }
}

利用CSS動畫幫我們可以很輕鬆的計算出每個時間點時的狀態，現在的問題就變成如何讓動畫停留在指定的時間點，這就需要使用到動畫的兩個屬性：

annimation-play-state：設置動畫是運行還是暫停，有兩個屬性值runing、paused
annimation-delay：設置動畫開始時間的偏移量，如果是正值，則動畫會延遲開始；如果是負值(-d)，動畫會立即開始，開始位置在動畫(d)s時所處的位置。

有了這兩個屬性，現在將上面的動畫停留在50%的位置
在這裏插入圖片描述

假設整個動畫過程需要1s，50%的位置則需要將延遲值設置為-0.5s，這樣動畫就會停留在0.5s的位置。

.box {
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
animation: run 1s -0.5s linear forwards infinite paused;
}

接下來只需要將滑條的值與動畫延遲的值關聯起來即可，這裏可以通過CSS變量來實現：

.box {
--duration: -0.5s;  // 定義延遲變量
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
animation: run 1s var(--duration) linear forwards infinite paused;
}

@keyframes run {
    0% {
transform: translateX(0) scale(1);
border-radius: 0%;
background: red;
    }
    50% {
transform: translateX(100px) scale(.5);
border-radius: 50%;
    }
    100% {
transform: translateX(200px) scale(1);
border-radius: 0%;
background: green;
    }
}

<script>
const input = document.querySelector("input");
    const box = document.querySelector(".box");
    // 綁定滑條輸入值變化
    input.addEventListener('input', (e) => {
        const value = e.target.value;
        // 設置變量
        box.style.setProperty('--duration', `-${e.target.value}s`)
    })
</script>