今天，有在群里看到這樣一個(gè)問題：有一個(gè)動畫，一開始靜止處于第一幀，只在用戶 hover 的時(shí)候運(yùn)行動畫，在運(yùn)行一次后停止，并且停留在最后一幀，使用 CSS 可以完成么?

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元蔡家坡做網(wǎng)站,已為上家服務(wù),為蔡家坡各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

像是這樣：

一個(gè)非常有意思的問題，答案是可以的。我們抽取一下其中的關(guān)鍵點(diǎn)：

動畫只運(yùn)行一次，未運(yùn)行前處于第一幀，運(yùn)行完后處于最后一幀。

動畫通過 hover 驅(qū)動，只有用戶 hover 元素的時(shí)候，動畫才進(jìn)行。

animation-fill-mode 控制元素在各個(gè)階段的狀態(tài)

首先，動畫只運(yùn)行一次，未運(yùn)行前處于第一幀，運(yùn)行完后處于最后一幀。

這個(gè)剛好利用 CSS 動畫的 animation-fill-mode: both 即可。

1. animation-fill-mode: backwards：可以讓元素在動畫開始之前的樣式為動畫運(yùn)行時(shí)的第一幀，動畫結(jié)束后的樣式則恢復(fù)為 CSS 規(guī)則設(shè)定的樣式。
2. animation-fill-mode: forwards：元素在動畫開始之前的樣式為 CSS 規(guī)則設(shè)定的樣式，而動畫結(jié)束后的樣式則表現(xiàn)為由執(zhí)行期間遇到的最后一個(gè)關(guān)鍵幀計(jì)算值(也就是停在最后一幀)。

而，animation-fill-mode: both 兼顧了上面兩種模式的特點(diǎn)，可以使得動畫開始前的樣式為動畫運(yùn)行時(shí)的第一幀，動畫結(jié)束后停在最后一幀。

反向利用 animation-play-state 實(shí)現(xiàn) hover 觸發(fā)動畫行進(jìn)。

而動畫通過 hover 驅(qū)動，只有用戶 hover 元素的時(shí)候，動畫才進(jìn)行這一點(diǎn)，利用 animation-play-state 即可。

我們都知道，正常情況下，動畫應(yīng)該是運(yùn)行狀態(tài)，那如果我們將動畫的默認(rèn)狀態(tài)設(shè)置為暫停，只有當(dāng)鼠標(biāo)點(diǎn)擊或者 hover 的時(shí)候，才設(shè)置其 animation-play-state: running，這樣就可以利用 hover 控制動畫的行進(jìn)!

基于上述兩點(diǎn)，我們來實(shí)現(xiàn)一個(gè)有意思的打字動畫，做到動畫只觸發(fā)單次，并且只有 hover 的時(shí)候動畫會運(yùn)行。

Hover Me - You are a pig!

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;
    }
}

默認(rèn)情況下，展示這樣一個(gè)界面：

接下來，我們把鼠標(biāo)放上去，看看會發(fā)生什么：

有意思，完美的實(shí)現(xiàn)了上面說的要求 -- 動畫通過 hover 驅(qū)動，只有用戶 hover 元素的時(shí)候，動畫才進(jìn)行。

當(dāng)然，這里還運(yùn)用了幾個(gè)小技巧，一并解釋下：

1. 打字動畫運(yùn)用了逐幀動畫，而不是補(bǔ)間動畫，主要利用了 CSS 動畫的 step-timing-function 步驟緩動函數(shù)，也就是代碼中的 steps(15, end)。
2. ch 是 CSS 當(dāng)中的一個(gè)相對單位，這一單位代表元素所用字體 font 中 “0” 這一字形的寬度。
3. font-family: monospace 表示等寬字體，每個(gè)字符占據(jù)的寬度是一樣，因?yàn)槲覀兪褂昧?26ch 來充當(dāng) 。
4. 元素的寬度，而 Hover Me - You are a pig 這一段文字算上空格剛好 26 個(gè)字符，26ch 剛好表示這一段文本的長度。
5. 一開始展示的文本 Hover me - 算上空格是 11ch 寬度，而最后整個(gè)文本展示完需要 26ch 的寬度，中間需要經(jīng)過 15 步的逐幀動畫，這里的元素剛好和代碼中的一一對應(yīng)上。

借助上面 4 步及搭配我們上文介紹的 animation-fill-mode: both、animation-play-state: paused 的應(yīng)用，我們就完美的實(shí)現(xiàn)了這樣一個(gè)非常有意思的打字動畫。

完整的代碼，你可以戳這里 CodePen Demo -- running once animation by hover[1]。

如果你想對 CSS 動畫有更深入細(xì)致的了解，可以翻看我的這篇文章，對動畫的每一個(gè)屬性都有著十分細(xì)致的講解：深入淺出 CSS 動畫[2]

最后

OK，本文到此結(jié)束，希望本文對你有所幫助 ????

參考資料

• [1]CodePen Demo -- running once animation by hover: https://codepen.io/Chokcoco/pen/QWQNJyp。
• [2]深入淺出 CSS 動畫: https://github.com/chokcoco/iCSS/issues/141。

分享文章：妙啊！動畫還可以這樣控制？
文章位置：http://uogjgqi.cn/article/dpjcsps.html