純CSS方式實(shí)現(xiàn)CSS動(dòng)畫的暫停與播放！
使用純 CSS 的方法，能否暫停、播放 CSS 動(dòng)畫?看起來不可能，至少很麻煩。
我們知道，在 CSS3 animation 中，有這樣一個(gè)屬性可以暫停、播放動(dòng)畫：
- {
- animation-play-state: paused | running;
- }
animation-play-state: 屬性定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停?？梢酝ㄟ^查詢它來確定動(dòng)畫是否正在運(yùn)行。另外，它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫的重放。
如果借助 Javascript，我們可以實(shí)現(xiàn)控制 CSS 動(dòng)畫的運(yùn)行和播放，下面列出部分關(guān)鍵代碼：
- <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>
- 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';
- }
- });
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)
純 CSS 實(shí)現(xiàn)
下面我們探討下，使用純 CSS 的方式能否實(shí)現(xiàn)。
hover 偽類實(shí)現(xiàn)
使用 hover 偽類，在鼠標(biāo)懸停在按鈕上面時(shí)，控制動(dòng)畫樣式的暫停。
關(guān)鍵代碼如下:
- <div class="btn stop">stop</div>
- <div class="animation"></div>
- <style>
- .stop:hover ~ .animation {
- animation-play-state: paused;
- }
- </style>
Demo — 純 CSS 方式實(shí)現(xiàn) CSS 動(dòng)畫的暫停與播放 (Hover):(https://codepen.io/Chokcoco/pen/PpxKBX)
當(dāng)然，這個(gè)方法不夠智能，如果釋放鼠標(biāo)的自由，點(diǎn)擊一下暫停、再點(diǎn)擊一下播放就好了。還有其他方法嗎?
checked 偽類實(shí)現(xiàn)
之前的文章《有趣的 CSS 題目(8)：純CSS的導(dǎo)航欄Tab切換方案》也談過，使用 radio 標(biāo)簽的 checked 偽類，加上 實(shí)現(xiàn)純 CSS 捕獲點(diǎn)擊事情。
并且利用被點(diǎn)擊的元素可以控制一些 CSS 樣式。實(shí)現(xiàn)如下：
- <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>
部分關(guān)鍵 CSS 代碼：
- .animation {
- animation: move 2s linear infinite alternate;
- }
- #stop:checked ~ .animation {
- animation-play-state: paused;
- }
- #play:checked ~ .animation {
- animation-play-state: running;
- }
我們希望當(dāng) #stop 和 #play 兩個(gè) radio 被點(diǎn)擊時(shí)，給 .animation 元素分別賦予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一，所以需要給兩個(gè) radio 標(biāo)簽賦予相同的 name 屬性。
DEMO — 純 CSS 方式實(shí)現(xiàn) CSS 動(dòng)畫的暫停與播放：(https://codepen.io/Chokcoco/pen/QpJwBW)
上面的示例 Demo 中，實(shí)現(xiàn)了純 CSS 方式實(shí)現(xiàn) CSS 動(dòng)畫的暫停與播放。
當(dāng)然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 :target 偽類選擇器也能實(shí)現(xiàn)上面同樣的效果，感興趣的可以嘗試一下。
到此本文結(jié)束，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
開本系列，談?wù)勔恍┯腥さ?CSS 題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細(xì)節(jié)。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補(bǔ)習(xí)一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
