談談一些有趣的CSS題目（十四）–純CSS方式實現CSS動畫的暫停與播放！

長征2號發表於2017-11-26
CSS動畫

開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）– 左邊豎條的實現方法

談談一些有趣的CSS題目（二）– 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）– 層疊順序與堆疊上下文知多少

談談一些有趣的CSS題目（四）– 從倒影說起，談談 CSS 繼承 inherit

談談一些有趣的CSS題目（五）– 單行居中，兩行居左，超過兩行省略

談談一些有趣的CSS題目（六）– 全相容的多列均勻佈局問題

談談一些有趣的CSS題目（七）– 消失的邊界線問題

談談一些有趣的CSS題目（八）– 純CSS的導航欄Tab切換方案

談談一些有趣的CSS題目（九）– 巧妙的實現 CSS 斜線

談談一些有趣的CSS題目（十）– 結構性偽類選擇器

談談一些有趣的CSS題目（十一）– reset.css知多少

談談一些有趣的CSS題目（十二）– 深入探討 CSS 特性檢測 @supports 與 Modernizr

談談一些有趣的CSS題目（十三）– 巧妙地製作背景色漸變動畫！

所有題目彙總在我的 Github 。

正文從這裡開始。

使用純 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`;
    }
     
});

Demo — pause CSS Animation：

 

純 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題目（八）– 純CSS的導航欄Tab切換方案》也談過，使用 radio 標籤的 checked 偽類，加上 <label for> 實現純 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 偽類選擇器也能實現上面同樣的效果，感興趣的可以嘗試一下。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。



本文轉自ChokCoco部落格園部落格，原文連結：http://www.cnblogs.com/coco1s/p/6642897.html


相關文章