一直到了這一個章節，大部分的
CSS屬性都涉及到了，當然還有一些很基礎或者很少用的沒有提到，這些我個人建議等到需要的時候去查查手冊就夠了；另外還有僞元素沒有提到過，也就是使用
::開頭的那些關鍵字，等一下就做個清單說明一下。
今天的主要内容，是
CSS的動畫和過渡，僞元素的清單以及一個純
CSS動畫執行個體的介紹。
1 CSS動畫
在網頁上建立動畫的方式實在太多了，比較早期的
Flash，
HTML 5的
canvas和
svg結合
JavaScript，以及我們現在要看的
CSS動畫，都是比較有代表性的。
1.1 @keyframes 規則
@keyframes規則内指定一個
CSS樣式和動畫将逐漸從目前的樣式更改為新的樣式，也就是聲明一個動畫動作組或者說關鍵幀組，并給它命名。
比如，命名一個動畫為
firstAnimation，動作為把對象的背景色由紅色變成藍色：
@
這裡使用 -webkit- 字首的原因是， Chrome 和 Chromium 浏覽器對于較複雜的動畫，無法通過原生的 keyframes 支援
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，可以改變任意多的樣式任意多的次數。
可以使用百分比來規定變化發生的時間，或如同上面的列子這樣用關鍵詞
from和
to，它們就等同于
0%和
100%；
0%是動畫的開始，
100%是動畫的完成，為了完成動畫，我們需要始終定義
0%和
100%選擇器。
1.2 綁定動畫
當然僅僅有動畫樣式和命名是不夠的，之後，我們需要用
animation把這個動畫綁定到對應的元素上去，比如
div：
div
好吧我妥協了，gif 用上了
綁定動畫必需兩個值：
- 動畫的名稱，也就是通過 @keyframes 規則命名的那個動畫規則組
- 動畫持續的時長，如果不設定該值，則動畫不生效，因為預設時長是
1.3 略複雜的動畫
@
其實在
@keyframes當中是可以設定任何
CSS樣式的，是以理論上我們可以做出非常複雜的變化（不過原諒我沒什麼美術能力，想象力也很普通）：
@
動畫開始前是紅色，因為是div本身的背景色，在動畫開始後就從藍色轉為海藍色了
同時，
animation這個屬性，其實也是簡寫屬性，它代表了如下幾種屬性的集合：
- animation-name ：綁定動畫名稱
- animation-duration ：指定動畫完成一個周期所花費的秒或毫秒，預設是
- animation-timing-function ：規定動畫的速度曲線，可以包含如下值：
- ease ：預設，動畫以低速開始，然後加快，在結束前變慢
- ease-in ：動畫以低速開始
- ease-out ：動畫以低速結束
- ease-in-out ：動畫以低速開始和結束
- linear ：動畫勻速進行
- cubic-bezier(x1, y1, x2, y2) ：貝塞爾曲線函數，可以自己定義速度曲線
- animation-fill-mode ：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
- animation-delay ：規定動畫何時開始，預設是
- animation-iteration-count ：規定動畫被播放的次數，預設是 1 ，除了數字外還可以設為 infinite 進行無限循環
- animation-direction ：規定動畫是否在下一周期逆向地播放，可以包含如下值：
- normal ：預設值，動畫按正常播放
- reverse ：動畫反向播放
- alternate ：動畫在奇數次正向播放，在偶數次反向播放
- alternate-reverse ：動畫在奇數次反向播放，在偶數次正向播放
- animation-play-state ：規定動畫是否正在運作（ running ）或暫停（ pause ），預設為 running
舉例，一個元素的動畫我們可以這樣設定：
div
也可以直接用
animation屬性這樣設定，效果完全一緻：
div
當然，從
gif看不太出來動畫啟動的
2s時間——怕大家覺得沒變化就去掉了——不過實際試一下就知道是怎麼一回事啦。
2 過渡
隻要使用
transition屬性，就可以看到過渡效果了，它其實就是是元素從一種樣式逐漸改變為另一種的效果，可以說也是一種動畫，而且連設定的格式也和
animation很相似：
div
它必需包含兩項内容：
- 指定要添加效果的 CSS 屬性
- 指定效果的持續時間
然後可以通過僞類對過渡效果發生的時機進行指定，比如常見的把滑鼠指針懸浮在元素上：
div
如果不使用
transition屬性，那麼
div的寬度将在懸浮的瞬間變長，而沒有這種動畫效果了。
2.1 指定多個過渡效果
通過在多個過渡效果之間使用
,進行分隔，就可以同時指定多個效果了，比如：
div
2.2 過渡屬性清單
其實
transition是如下幾種屬性的簡寫屬性：
- transition-property ：指定 CSS 屬性名稱，也就是 transition 的效果
- transition-duration ：指定多少秒或毫秒才能完成，預設是
- transition-timing-function ：指定過渡效果的速度曲線，可以包含如下值：
- ease ：預設，動畫以低速開始，然後加快，在結束前變慢
- ease-in ：動畫以低速開始
- ease-out ：動畫以低速結束
- ease-in-out ：動畫以低速開始和結束
- linear ：動畫勻速進行
- cubic-bezier(x1, y1, x2, y2) ：貝塞爾曲線函數，可以自己定義速度曲線
- transition-delay ：指定過渡何時開始，預設是
舉例，最開始的過渡效果我們可以這樣設定：
div
也可以直接用
transition屬性這樣設定，效果完全一緻：
div
這裡就不重複使用一張圖檔了，因為相對比較簡單，還是自己試一下更容易掌握。
3 僞元素
CSS僞元素是一個附加至選擇器末的關鍵詞，允許對被選擇元素的特定部分修改樣式，從
CSS 3開始明确規定僞元素需要使用雙冒号
::标示，包括如下這些（其實在基本樣式（1）這章，選擇器一節的最後一部分已經有個比較詳細的清單了）：
- ::after (:after) ：向標明的元素後插入内容
- ::before (:before) ：向標明的元素前插入内容
- ::cue (:cue) ：比對所選元素中的WebVTT提示。這可以用于在VTT軌道的媒體中使用字幕和其他線索
- ::first-letter (:first-letter) ：選擇元素第一個字母
- ::first-line (:first-line) ：選擇選擇器第一行
- ::selection ：應用于文檔中被使用者高亮的部分（比如使用滑鼠或其他選擇裝置選中的部分）
- ::slotted() ：用于標明那些被放在 HTML模闆 中的元素，僅僅适用于 影子節點樹(Shadow Dom)，并且隻會選擇實際的元素節點，而不包括文本節點
按照規範，應該使用雙冒号
::而不是單個冒号
:，以便區分僞類和僞元素。但是，由于舊版本的 W3C 規範并未對此進行特别區分，是以目前絕大多數的浏覽器都同時支援使用這兩種方式來表示僞元素，考慮到規範使用，建議以後統一使用雙冒号。
僞元素與僞類的最根本不同不是在寫法上，而是一個選擇器中隻能使用一個僞元素。
這個就沒什麼例子好說了，試着用一下就很容易了解了。
4 一個純 CSS 動畫執行個體
可以點選這裡檢視線上的示範：https://www.html5tricks.com/demo/pure-css3-clock/index.html
當然如果自己感興趣的話，可以看看源代碼，
HTML部分很簡單，如下：
<!DOCTYPE html>
的部分相對複雜，因為考慮到了大多數主流浏覽器的相容性，是以有不少帶有對應浏覽器字首的備援代碼：
.
最終實作的效果如下：
希望這個可以對大家有所啟發。