css揭祕實戰技巧 - 過渡與動畫[七]

全目錄

本系列文章，主要是圍繞css3屬性，實現咱們常見的各類效果，這些效果都是咱們實戰開發中常常能夠用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字體排印[四]
5. css揭祕實戰技巧 - 用戶體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

1. 逐幀動畫 - 「加載中」 案例
2. 閃爍效果
3. 打字動畫
4. 狀態平滑的動畫

二：逐幀動畫

以你們最多見的 「加載中」 的效果爲例：

方案一：直接讓設計給一個gif圖片便可。

可是這種方案的缺陷就是gif自己是不透明的，並且咱們沒法去加一個特殊樣式，只能依靠設計給什麼樣的效果，咱們就顯示什麼樣的效果。

方案二：採用js去實現，可是很麻煩。

方案三：徹底採用css去實現，無需加載其餘資源，並且能夠定製開發。

首先，來一張背景圖：

看到這張圖，可能已經瞬間感受離咱們想要的效果已經不遠了，只須要設置背景圖片爲該圖片，而且經過backgroud-position去控制背景圖片的位置，而後再加上動畫不就是咱們想要的效果了，咱們來試一下：

width: 50px;
height: 50px;
background: url("./img/loader.png") 0 0;
background-size: cover;
複製代碼

這個時候，效果就是隻顯示第一張圖片，接下來，咱們添加動畫

div{
    width: 50px;
    height: 50px;
    background: url("./img/loader.png") 0 0;
    background-size: cover;
    animation: loader 1s infinite;
}
@keyframes loader {
    to {
        background-position: -800px 0;
    }
}
複製代碼

此時，咱們添加完動畫之後，發現最後效果並非咱們想要的 ，爲何呢？這就回到了咱們此節的標題，逐幀動畫

默認狀況下，動畫的運行速度是按貝塞爾曲線運行的，能夠簡單理解爲並非勻速去運行的，那咱們該怎麼樣調整速度呢？ 使用step()函數，它能夠傳入一個參數，表示這次動畫是分幾步完成的，例如，step(8) 表示這次動畫是分8部完成，也就是總共8幀，且逐幀勻速去執行的。

因此，最終代碼以下：

div{
    width: 50px;
    height: 50px;
    background: url("./img/loader.png") 0 0;
    background-size: cover;
    animation: loader 1s infinite steps(8);
}
@keyframes loader {
    to {
        background-position: -800px 0;
    }
}
複製代碼

三：閃爍效果

用css能夠實現各類類型的閃爍效果：例如，對整個元素，對文字顏色，對邊框顏色等都是能夠實現閃爍效果的，這裏，咱們以文字閃爍爲例, 這也是最多見的一個效果，用於突出提示某些文字的信息。

實現思路：首先仍是經過動畫去控制文字的顏色，不一樣狀況下，文字的顏色不一樣，這樣帶來的效果就是文字的閃爍效果。

初步代碼以下：

//文字開始顏色爲黑色，1s後顏色爲透明，如此 循環閃爍
p{
    animation: blink 1s infinite;
}
@keyframes blink {
    to {
        color: transparent;
    }
}
複製代碼

此時的問題：當1s的動畫結束之後，文字顏色又由透明變爲黑色，此時這個過程是很生硬的直接跳回原來的顏色，那麼，如何讓文字更加平穩的顯現，同時又可讓文字更加平穩的隱去，這是接下來要實現的關鍵。

啦啦啦 ，另一個法寶屬性就出來了：animation-direction

animation-direction 的 惟 一 做 用 就 是 反 轉 每 一 個 循 環 周 期 (reverse)，或第偶數個循環週期(alternate)，或第奇數個循環週期 (alternate-reverse)。它的偉大之處在於，它會同時反轉調整函數， 從而產生更加逼真的動畫效果。

看了說明，可能還不太清楚，咱們來看一下圖片：

例如：alternate，是反轉偶數的循環週期，正常咱們顏色是從黑色變成透明，可是到了第二週期（偶數週期），因爲進行了反轉，此時顏色就成了從透明變成黑色，如此循環，就是咱們上圖中所看到的效果啦，這樣看起來確實過分的更加平穩。

最終代碼以下：

p{
    animation: blink 1s infinite alternate;
}
@keyframes blink {
    50% {
        color: transparent;
    }
}
複製代碼

四：打字動畫

首先，咱們來看一下效果：

實現思路：

讓容器的寬度成爲動畫的主體:把全部文本包裹在這個容 器中，而後讓它的寬度從 0 開始以步進動畫的方式、一個字一個字地擴張到 它應有的寬度。你可能已經察覺到了，這個方法是有侷限的:它並不適用於 多行文本 11 。然而幸運的是，在絕大多數狀況下，咱們把這種效果應用在相似 標題的單行文本上。

代碼以下：

//html代碼
<div>
    CSS is awesome!
</div>

//css代碼
div{
    font-family: Consolas, Monaco, monospace; //這些都是等寬字體
    font-size: 30px;
    width: 15ch; 
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    animation: write 8s steps(15);
}
@keyframes write{
    from {
        width: 0
    }
}
複製代碼

注意：此處咱們用到一個ch單位：在等寬字體中，「0」字形的寬度和其餘全部字形的寬度是同樣的。因 此，若是咱們用 ch 單位來表達這個標題的寬度，那取值實際上就是字符的 數量:在這個例子中就是 15。

五：狀態平滑的動畫

首先，咱們來看一個效果：點擊查看,

效果描述：這張圖 片本來是橫幅的。圓形區域顯露 出的是圖片的右半部分，而當用 戶的鼠標移到圖上時，它會緩慢 地向左滾動，從而顯露出原先被 裁掉的部分。在默認狀況下，當 用戶把鼠標移開時，圖片會生硬 地跳回原始位置，這很容易讓人 誤覺得 UI 崩壞了。由於這是一個 很是小的網站，而這張圖片又非 常顯眼，因此我實在沒法對這個 問題視而不見

因此，接下來想要實現的效果的核心就是：如何手動的觸發動畫的執行，同時如何暫定動畫的執行。

固然，答案很簡單：animation-play-state ! 它就是爲暫停動畫專門設計的。

代碼以下：

@keyframes panoramic {
    to { background-position: 100% 0; }
}
.panoramic {
    width: 150px; height: 150px;
    background: url("img/naxos-greece.jpg"); 
    background-size: auto 100%;
    animation: panoramic 10s linear infinite alternate; 
    animation-play-state: paused; //默認暫停動畫
}
.panoramic:hover, .panoramic:focus { 
    animation-play-state: running; //鼠標附上去的時候，執行動畫
}
複製代碼