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

沉默抒懷者發表於2019-05-08
CSS動畫

全目錄

本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：

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

前言

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

二：逐幀動畫

以大家最常見的 “載入中” 的效果為例：

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

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

但是這種方案的缺陷就是gif本身是不透明的，而且我們無法去加一個特殊樣式，只能依靠設計給什麼樣的效果，我們就顯示什麼樣的效果。

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

方案三：完全採用css去實現，無需載入其他資源，而且可以定製開發。

首先，來一張背景圖：

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;
    }
}
複製程式碼

此時，我們新增完動畫以後，發現最後效果並不是我們想要的，點選 檢視效果 ，為什麼呢？這就回到了我們此節的標題，逐幀動畫

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

預設情況下，動畫的執行速度是按貝塞爾曲線執行的，可以簡單理解為並不是勻速去執行的，那我們該怎麼樣調整速度呢？ 使用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)。它的偉大之處在於，它會同時反轉調整函式， 從而產生更加逼真的動畫效果。

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

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

例如：alternate，是反轉偶數的迴圈週期，正常我們顏色是從黑色變成透明，但是到了第二週期（偶數週期），由於進行了反轉，此時顏色就成了從透明變成黑色，如此迴圈，就是我們上圖中所看到的效果啦，這樣看起來確實過度的更加平穩。

最終程式碼如下：

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

您可以點選 檢視效果 ，git地址（歡迎star,給小編鼓勵哦，比心）

四：打字動畫

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

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

實現思路：

讓容器的寬度成為動畫的主體:把所有文字包裹在這個容 器中，然後讓它的寬度從 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。

五：狀態平滑的動畫

首先，我們來看一個效果：點選檢視,

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

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

效果描述：這張圖 片原本是橫幅的。圓形區域顯露 出的是圖片的右半部分，而當用 戶的滑鼠移到圖上時，它會緩慢 地向左滾動，從而顯露出原先被 裁掉的部分。在預設情況下，當 使用者把滑鼠移開時，圖片會生硬 地跳回原始位置，這很容易讓人 誤以為 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; //滑鼠附上去的時候，執行動畫
}
複製程式碼

相關文章