妙啊！動畫還可以這樣控制？
今天，有在群里看到這樣一個問題：有一個動畫，一開始靜止處于第一幀，只在用戶 hover 的時候運行動畫，在運行一次后停止，并且停留在最后一幀，使用 CSS 可以完成么?
像是這樣：
一個非常有意思的問題，答案是可以的。我們抽取一下其中的關鍵點：
動畫只運行一次，未運行前處于第一幀，運行完后處于最后一幀。
動畫通過 hover 驅動，只有用戶 hover 元素的時候，動畫才進行。
animation-fill-mode 控制元素在各個階段的狀態
首先，動畫只運行一次，未運行前處于第一幀，運行完后處于最后一幀。
這個剛好利用 CSS 動畫的 animation-fill-mode: both 即可。
- animation-fill-mode: backwards：可以讓元素在動畫開始之前的樣式為動畫運行時的第一幀，動畫結束后的樣式則恢復為 CSS 規則設定的樣式。
- animation-fill-mode: forwards：元素在動畫開始之前的樣式為 CSS 規則設定的樣式，而動畫結束后的樣式則表現為由執行期間遇到的最后一個關鍵幀計算值(也就是停在最后一幀)。
而，animation-fill-mode: both 兼顧了上面兩種模式的特點，可以使得動畫開始前的樣式為動畫運行時的第一幀，動畫結束后停在最后一幀。
反向利用 animation-play-state 實現 hover 觸發動畫行進。
而動畫通過 hover 驅動，只有用戶 hover 元素的時候，動畫才進行這一點，利用 animation-play-state 即可。
我們都知道，正常情況下，動畫應該是運行狀態，那如果我們將動畫的默認狀態設置為暫停，只有當鼠標點擊或者 hover 的時候，才設置其 animation-play-state: running，這樣就可以利用 hover 控制動畫的行進!
基于上述兩點，我們來實現一個有意思的打字動畫，做到動畫只觸發單次，并且只有 hover 的時候動畫會運行。
<p>Hover Me - You are a pig!</p>
p {
position: relative;
font-family: monospace;
width: 26ch;
animation: typing 3s steps(15, end);
animation-fill-mode: both;
animation-play-state: paused;
overflow: hidden;
}
p:hover {
animation-play-state: running;
}
p::before {
position: absolute;
content: "";
width: 4px;
top: 0;
bottom: 0;
right: 0;
animation: blink .8s linear infinite;
}
@keyframes blink {
0%, 50% {
border-right: 4px solid transparent;
}
50%, 100% {
border-right: 4px solid #000;
}
}
@keyframes typing {
from {
width: 11ch;
}
to {
width: 26ch;
}
}
默認情況下，展示這樣一個界面：
接下來，我們把鼠標放上去，看看會發生什么：
有意思，完美的實現了上面說的要求 -- 動畫通過 hover 驅動，只有用戶 hover 元素的時候，動畫才進行。
當然，這里還運用了幾個小技巧，一并解釋下：
- 打字動畫運用了逐幀動畫，而不是補間動畫，主要利用了 CSS 動畫的 step-timing-function 步驟緩動函數，也就是代碼中的 steps(15, end)。
- ch 是 CSS 當中的一個相對單位，這一單位代表元素所用字體 font 中 “0” 這一字形的寬度。
- font-family: monospace 表示等寬字體，每個字符占據的寬度是一樣，因為我們使用了 26ch 來充當 。
- 元素的寬度，而 Hover Me - You are a pig 這一段文字算上空格剛好 26 個字符，26ch 剛好表示這一段文本的長度。
- 一開始展示的文本 Hover me - 算上空格是 11ch 寬度，而最后整個文本展示完需要 26ch 的寬度，中間需要經過 15 步的逐幀動畫，這里的元素剛好和代碼中的一一對應上。
借助上面 4 步及搭配我們上文介紹的 animation-fill-mode: both、animation-play-state: paused 的應用，我們就完美的實現了這樣一個非常有意思的打字動畫。
完整的代碼，你可以戳這里 CodePen Demo -- running once animation by hover[1]。
如果你想對 CSS 動畫有更深入細致的了解，可以翻看我的這篇文章，對動畫的每一個屬性都有著十分細致的講解：深入淺出 CSS 動畫[2]
最后
OK，本文到此結束，希望本文對你有所幫助 :)
參考資料
- [1]CodePen Demo -- running once animation by hover: https://codepen.io/Chokcoco/pen/QWQNJyp。
- [2]深入淺出 CSS 動畫: https://github.com/chokcoco/iCSS/issues/141。
