如何用純CSS方式實(shí)現(xiàn)CSS動(dòng)畫的暫停與播放效果？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都網(wǎng)站制作、成都網(wǎng)站建設(shè)， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。
使用純 CSS 的方法，暫?；虿シ?CSS 動(dòng)畫。是不是看起來(lái)應(yīng)該是不可能的實(shí)現(xiàn)的；或者就算可以實(shí)現(xiàn)，也是一個(gè)很麻煩的實(shí)現(xiàn)方法，需要用大量的css樣式才可以實(shí)現(xiàn)。其實(shí)不然，在 CSS3 animation 中，就有這樣一個(gè)屬性可以做到暫停、播放動(dòng)畫。
animation-play-state屬性
animation-play-state: paused | running;
animation-play-state: 屬性定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停?？梢酝ㄟ^(guò)查詢它來(lái)確定動(dòng)畫是否正在運(yùn)行。另外，它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫的重放。
如果借助 Javascript，我們可以實(shí)現(xiàn)控制 CSS 動(dòng)畫的運(yùn)行和播放，下面列出部分關(guān)鍵代碼：
html代碼：
stop
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';
}
});效果圖（播放時(shí)和停止播放后）：
純 CSS 實(shí)現(xiàn)
下面我們探討下，使用純 CSS 的方式能否實(shí)現(xiàn)。
hover 偽類實(shí)現(xiàn)
使用 hover 偽類，在鼠標(biāo)懸停在按鈕上面時(shí)，控制動(dòng)畫樣式的暫停。
關(guān)鍵代碼如下:
html代碼：
stop
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;
}效果圖：
當(dāng)然，這個(gè)方法不夠智能，如果釋放鼠標(biāo)的自由，點(diǎn)擊一下暫停、再點(diǎn)擊一下播放就好了。還有其他方法嗎?
checked 偽類實(shí)現(xiàn)
之前的文章《有趣的 CSS 題目(8)：純CSS的導(dǎo)航欄Tab切換方案》也談過(guò)，使用 radio 標(biāo)簽的 checked 偽類，加上 實(shí)現(xiàn)純 CSS 捕獲點(diǎn)擊事情。
并且利用被點(diǎn)擊的元素可以控制一些 CSS 樣式。實(shí)現(xiàn)如下：
html代碼：
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;
}我們希望當(dāng) #stop 和 #play 兩個(gè) radio 被點(diǎn)擊時(shí)，給 .animation 元素分別賦予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一，所以需要給兩個(gè) radio 標(biāo)簽賦予相同的 name 屬性。
效果圖：
上面的示例中，實(shí)現(xiàn)了純 CSS 方式實(shí)現(xiàn) CSS 動(dòng)畫的暫停與播放。
當(dāng)然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 :target 偽類選擇器也能實(shí)現(xiàn)上面同樣的效果，感興趣的可以嘗試一下。
關(guān)于如何用純CSS方式實(shí)現(xiàn)CSS動(dòng)畫的暫停與播放效果問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
