如何用純CSS方式實現CSS動畫的暫停與播放效果

如何用純CSS方式實現CSS動畫的暫停與播放效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

使用純 CSS 的方法，暫停或播放 CSS 動畫。是不是看起來應該是不可能的實現的；或者就算可以實現，也是一個很麻煩的實現方法，需要用大量的css樣式才可以實現。其實不然，在 CSS3 animation 中，就有這樣一個屬性可以做到暫停、播放動畫。

animation-play-state屬性

 animation-play-state: paused | running;

animation-play-state: 屬性定義一個動畫是否運行或者暫停。可以通過查詢它來確定動畫是否正在運行。另外，它的值可以被設置為暫停和恢復的動畫的重放。

如果借助 Javascript，我們可以實現控制 CSS 動畫的運行和播放，下面列出部分關鍵代碼：

html代碼：

<div class="btn">stop</div> 
<div class="animation"></div>

css代碼：

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

js代碼：

document.querySelector('.btn').addEventListener('click', function() {
    let btn = document.querySelector('.btn');
    let elem = document.querySelector('.animation');
    let state = elem.style['animationPlayState'];
    
    if(state === 'paused') {
        elem.style['animationPlayState'] = 'running';
        btn.innerText = 'stop';
    } else {
        elem.style['animationPlayState'] = 'paused';
        btn.innerText = 'play';
    }
    
});

效果圖（播放時和停止播放后）：

純 CSS 實現

下面我們探討下，使用純 CSS 的方式能否實現。

hover 偽類實現

使用 hover 偽類，在鼠標懸停在按鈕上面時，控制動畫樣式的暫停。

關鍵代碼如下:

html代碼：

<div class="btn stop">stop</div> 
<div class="animation"></div>

css代碼：

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

效果圖：

當然，這個方法不夠智能，如果釋放鼠標的自由，點擊一下暫停、再點擊一下播放就好了。還有其他方法嗎?

checked 偽類實現

之前的文章《有趣的 CSS 題目(8)：純CSS的導航欄Tab切換方案》也談過，使用 radio 標簽的 checked 偽類，加上 實現純 CSS 捕獲點擊事情。

并且利用被點擊的元素可以控制一些 CSS 樣式。實現如下：

html代碼：

<input id="stop" type="radio" name="playAnimation"/>
<input id="play" type="radio" name="playAnimation"/>

<div class="box">
    <label for="stop">
        <div class="btn">stop</div>
    </label>
    <label for="play">
        <div class="btn">play</div>
    </label>
</div>

<div class="animation"></div>

css代碼：

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}

我們希望當 #stop 和 #play 兩個 radio 被點擊時，給 .animation 元素分別賦予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一，所以需要給兩個 radio 標簽賦予相同的 name 屬性。

效果圖：

上面的示例中，實現了純 CSS 方式實現 CSS 動畫的暫停與播放。

當然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 :target 偽類選擇器也能實現上面同樣的效果，感興趣的可以嘗試一下。

關于如何用純CSS方式實現CSS動畫的暫停與播放效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。