開本系列，談談一些有趣的 <code>CSS</code> 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 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 中，有這樣一個屬性可以暫停、播放動畫：
animation-play-state: 屬性定義一個動畫是否運作或者暫停。可以通過查詢它來确定動畫是否正在運作。另外，它的值可以被設定為暫停和恢複的動畫的重放。
如果借助 Javascript，我們可以實作控制 CSS 動畫的運作和播放，下面列出部分關鍵代碼：
Demo -- pause CSS Animation：
下面我們探讨下，使用純 CSS 的方式能否實作。
使用 hover 僞類，在滑鼠懸停在按鈕上面時，控制動畫樣式的暫停。
關鍵代碼如下:
Demo -- 純 CSS 方式實作 CSS 動畫的暫停與播放 (Hover):
當然，這個方法不夠智能，如果釋放滑鼠的自由，點選一下暫停、再點選一下播放就好了。還有其他方法嗎？
之前的文章《談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案》也談過，使用 <code>radio</code> 标簽的 <code>checked</code> 僞類，加上 <code><label for></code> 實作純 CSS 捕獲點選事情。
并且利用被點選的元素可以控制一些 CSS 樣式。實作如下：
部分關鍵 CSS 代碼：
我們希望當 <code>#stop</code> 和 <code>#play</code> 兩個 radio 被點選時，給 <code>.animation</code> 元素分别賦予 <code>animation-play-state: paused</code> 或是 <code>animation-play-state: running</code> 。而且二者隻能生效其一，是以需要給兩個 radio 标簽賦予相同的 name 屬性。
DEMO -- 純 CSS 方式實作 CSS 動畫的暫停與播放：
上面的示例 Demo 中，實作了純 CSS 方式實作 CSS 動畫的暫停與播放。
當然，還有一些其他方法，例如 radio 替換成 checkbox ，或者使用 <code>:target</code> 僞類選擇器也能實作上面同樣的效果，感興趣的可以嘗試一下。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。