CSS動畫：animation、transition、transform、translate

weixin_34054866發表於2018-06-22
CSS動畫ORM

容易混淆的幾個css屬性

css屬性很多，並且有些無論是字母的拼寫還是字面上的意思，都容易混淆，比如我列出來的幾個屬性，是不是也混淆過你～

屬性 含義
animation（動畫） 用於設定動畫屬性，他是一個簡寫的屬性，包含6個屬性
transition（過渡） 用於設定元素的樣式過度，和animation有著類似的效果，但細節上有很大的不同
transform（變形） 用於元素進行旋轉、縮放、移動或傾斜，和設定樣式的動畫並沒有什麼關係，就相當於color一樣用來設定元素的“外表”
translate（移動） translate只是transform的一個屬性值，即移動。

弄清楚這幾個問題，我們就可以頭腦清醒的狀態下去學習css的動畫

transition

什麼叫過渡？字面意思上來講，就是元素從這個屬性(color)的某個值(red)過渡到這個屬性(color)的另外一個值(green)，這是一個狀態的轉變，需要一種條件來觸發這種轉變，比如我們平時用到的:hoever、:focus、:checked、媒體查詢或者JavaScript。

先從一個簡單的demo來看看transition的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>transition</title>
    <style>
    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
    }
    #box:hover {
        transform: rotate(180deg) scale(.5, .5);
    }
    </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>

效果：

815267-d3d5e20542ef4d34
image

我們來分析這一整個過程，首先transition給元素設定的過渡屬性是transform，當滑鼠移入元素時，元素的transform發生變化，那麼這個時候就觸發了transition，產生了動畫，當滑鼠移出時，transform又發生變化，這個時候還是會觸發transition，產生動畫，所以transition產生動畫的條件是transition設定的property發生變化，這種動畫的特點是需要“一個驅動力去觸發”，有著以下幾個不足：

  1. 需要事件觸發，所以沒法在網頁載入時自動發生

  2. 是一次性的，不能重複發生，除非一再觸發

  3. 只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態

語法：transition: property duration timing-function delay;

值 描述
transition-property 規定設定過渡效果的 CSS 屬性的名稱
transition-duration 規定完成過渡效果需要多少秒或毫秒
transition-timing-function 規定速度效果的速度曲線
transition-delay 定義過渡效果何時開始

animation

在官方的介紹中這個屬性是transition屬性的擴充套件，彌補了transition的很多不足，我理解為animation是由多個transition的效果疊加，並且可操作性更強，能夠做出複雜酷炫的效果(前提是你愛折騰)，我們以一個例子來介紹animation的威力：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>animation</title>
    <style>
    .box {
      height: 100px;
      width: 100px;
      border: 15px solid black;
      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
    }
    .box:hover {
        animation-play-state: paused;
    }
    @keyframes changebox {
      10% {
          background: red;
      }
      50% {
          width: 80px;
      }
      70% {
          border: 15px solid yellow;
      }
      100% {
        width: 180px;
        height: 180px;
      }
    }
    </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
815267-3b9cc65dcdd97216.gif
image.gif

分析：

我們先來看看keyframes這個關鍵點，它定義了一個動畫組合叫changebox，裡面的10%，50%，70%，100%代表在變化中不同時間點的屬性值，比如這個動畫的總時間是1s，那麼10%就是在0-0.1s中的動畫，通過這個我們可以較精確的控制動畫變化中任何一個時間點的屬性效果，這大大提高了我們對動畫的把控，是做複雜動畫的基礎，我們再回來看animation中整整八個值，是不是有點誇張，還沒見過這麼長的值，通過控制animation的每個值，控制動畫變得非常靈活，我們來具體瞭解它的語法以及各個值代表著什麼：

語法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

值 描述
name 用來呼叫@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
duration 指定元素播放動畫所持續的時間
timing-function 規定速度效果的速度曲線，是針對每一個小動畫所在時間範圍的變換速率
delay 定義在瀏覽器開始執行動畫之前等待的時間，值整個animation執行之前等待的時間
iteration-count 定義動畫的播放次數，可選具體次數或者無限(infinite)
direction 設定動畫播放方向：normal(按時間軸順序),reverse(時間軸反方向執行),alternate(輪流，即來回往復進行),alternate-reverse(動畫先反執行再正方向執行，並持續交替執行)
play-state 控制元素動畫的播放狀態，通過此來控制動畫的暫停和繼續，兩個值：running(繼續)，paused(暫停)
fill-mode 控制動畫結束後，元素的樣式，有四個值：none(回到動畫沒開始時的狀態)，forwards(動畫結束後動畫停留在結束狀態)，backwords(動畫回到第一幀的狀態)，both(根據animation-direction輪流應用forwards和backwards規則)，注意與iteration-count不要衝突(動畫執行無限次)

animation與transition 不同的是，keyframes提供更多的控制，尤其是時間軸的控制，這點讓css animation更加強大，使得flash的部分動畫效果可以由css直接控制完成，而這一切，僅僅只需要幾行程式碼，也因此誕生了大量基於css的動畫庫，用來取代flash的動畫部分。在我的專案中一般用 Animate.css 來設定一些動畫，期待在工作中能夠用animation完美實現UI設計師給的設計圖～

相關文章