使用純 CSS 的方法，能否暫停、播放 CSS 動畫？看起來不可能，至少很麻煩。
我們知道，在 CSS3 animation 中，有這樣一個屬性可以暫停、播放動畫：
|
1 2 3 |
{ animation-play-state: paused | running; } |
animation-play-state: 屬性定義一個動畫是否執行或者暫停。可以通過查詢它來確定動畫是否正在執行。另外，它的值可以被設定為暫停和恢復的動畫的重放。
如果藉助 Javascript，我們可以實現控制 CSS 動畫的執行和播放，下面列出部分關鍵程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="btn">stop</div> <div class="animation"></div> <style> .animation { animation: move 2s linear infinite alternate; } @keyframes move { 0% { transform: translate(-100px, 0); } 100% { transform: translate(100px, 0); } } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 偽類，在滑鼠懸停在按鈕上面時，控制動畫樣式的暫停。
關鍵程式碼如下:
|
1 2 3 4 5 6 7 8 |
<div class="btn stop">stop</div> <div class="animation"></div> <style> .stop:hover ~ .animation { animation-play-state: paused; } </style> |
Demo — 純 CSS 方式實現 CSS 動畫的暫停與播放 (Hover):
當然，這個方法不夠智慧，如果釋放滑鼠的自由，點選一下暫停、再點選一下播放就好了。還有其他方法嗎？
checked 偽類實現
之前的文章《有趣的CSS題目（8）：純CSS的導航欄Tab切換方案》也談過，使用 radio 標籤的 checked 偽類，加上 實現純 CSS 捕獲點選事情。
並且利用被點選的元素可以控制一些 CSS 樣式。實現如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 |
.animation { animation: move 2s linear infinite alternate; } #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 屬性。
DEMO — 純 CSS 方式實現 CSS 動畫的暫停與播放：
上面的示例 Demo 中，實現了純 CSS 方式實現 CSS 動畫的暫停與播放。
當然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 :target 偽類選擇器也能實現上面同樣的效果，感興趣的可以嘗試一下。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
所有題目彙總在我的 Github 。
- 有趣的CSS題目（1）： 左邊豎條的實現方法
- 有趣的CSS題目（2）： 從條紋邊框的實現談盒子模型
- 有趣的CSS題目（3）： 層疊順序與堆疊上下文知多少
- 有趣的CSS題目（4）： 從倒影說起，談談 CSS 繼承 inherit
- 有趣的CSS題目（5）： 單行居中，兩行居左，超過兩行省略
- 有趣的CSS題目（6）： 全相容的多列均勻佈局問題
- 有趣的CSS題目（7）：消失的邊界線問題
- 有趣的CSS題目（8）：純CSS的導航欄Tab切換方案
- 有趣的CSS題目（9）：巧妙實現 CSS 斜線
- 有趣的CSS題目（10）：結構性偽類選擇器
- 有趣的CSS題目（11）：reset.css 知多少？
- 有趣的CSS題目（12）：你該知道的字型 font-family
- 有趣的CSS題目（13）：巧妙地製作背景色漸變動畫！
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
