CSS是一種定義樣式結構如字型、顏色、位置等的語言,被用於描述網頁上的資訊格式化和現實的方式。CSS樣式可以直接儲存於HTML網頁或者單獨的樣式單檔案。無論哪一種方式,樣式單包含將樣式應用到指定類型的元素的規則。本節內容我們就和大家分享一下用css實現css動畫的暫停與播放功能的教程。
我們知道,在 CSS3 animation 中,有這樣一個屬性可以暫停、播放動畫:
{ animation-play-state: paused | running; }
animation-play-state: 屬性定義一個動畫是否運行或者暫停。可以通過查詢它來確定動畫是否正在運行。另外,它的值可以被設定為暫停和恢複的動畫的重放。
如果藉助 Javascript,我們可以實現控制 CSS 動畫的運行和播放,下面列出部分關鍵代碼:
<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 實現
下面我們探討下,使用純 CSS 的方式能否實現。
hover 偽類實現
使用 hover 偽類,在滑鼠移至上方在按鈕上面時,控制動畫樣式的暫停。
關鍵代碼如下:
<div class="btn stop">stop</div> <div class="animation"></div> <style> .stop:hover ~ .animation { animation-play-state: paused; } </style>
Demo — 純 CSS 方式實現 CSS 動畫的暫停與播放 (Hover):(https://codepen.io/Chokcoco/pen/PpxKBX)
當然,這個方法不夠智能,如果釋放滑鼠的自由,點擊一下暫停、再點擊一下播放就好了。還有其他方法嗎?
checked 偽類實現
之前的文章《有趣的 CSS 題目(8):純CSS的導覽列Tab切換方案》也談過,使用 radio 標籤的 checked 偽類,加上 實現純 CSS 捕獲點擊事情。
並且利用被點擊的元素可以控制一些 CSS 樣式。實現如下:
<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 { 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 動畫的暫停與播放:(https://codepen.io/Chokcoco/pen/QpJwBW)
上面的樣本 Demo 中,實現了純 CSS 方式實現 CSS 動畫的暫停與播放。
當然,還有一些其他方法,例如 radio 替換成 checkbox ,或者使用 :target 偽類別選取器也能實現上面同樣的效果,感興趣的可以嘗試一下。
以上就是CSS方式實現CSS動畫的暫停與播放功能的教程,希望能協助到大家。