CSS動畫：animation、transition、transform、translate傻傻分不清

時間 2019-11-07

標籤 css 動畫 animation transition transform translate 分不清欄目 CSS 简体版

原文原文鏈接

本文首發於個人博客網站:Vince's Blogcss

前言

在平時開發過程當中，因爲都是本身搗鼓玩的項目，並無UI設計給個人設計圖，更沒有什麼特效要求，致使對css動畫一直都不是很熟悉，可是做爲即將進入實習單位的萌新程序員，要時刻準備着設計師要求的各類動畫，因而有了這一篇文章。html

容易混淆的幾個css屬性

css屬性不少，而且有些不管是字母的拼寫仍是字面上的意思，都容易混淆，好比我列出來的幾個屬性，是否是也混淆過你～git

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

弄清楚這幾個問題，咱們就能夠頭腦清醒的狀態下去學習css的動畫程序員

transition

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

先從一個簡單的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>

複製代碼

效果：bash

咱們來分析這一整個過程，首先transition給元素設置的過渡屬性是transform，當鼠標移入元素時，元素的transform發生變化，那麼這個時候就觸發了transition，產生了動畫，當鼠標移出時，transform又發生變化，這個時候仍是會觸發transition，產生動畫，因此transition產生動畫的條件是transition設置的property發生變化，這種動畫的特色是須要「一個驅動力去觸發」，有着如下幾個不足：函數

須要事件觸發，因此無法在網頁加載時自動發生
是一次性的，不能重複發生，除非一再觸發
只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態
一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

語法：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>
複製代碼

分析：

咱們先來看看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設計師給的設計圖～

總結

寫這篇文章的目的是提醒本身不要將這四個屬性混淆，順便詳細講解CSS製做動畫的方法，簡單一次性的動畫中推薦使用transition，比較邏輯清晰，可維護性較好。若是遇到比較複雜的動畫，這個時候即可以拿出animation開始你的表演，其實不只僅用css能實現動畫，用js一樣能夠操控元素的樣式實現動畫，這個時候你腦海裏是否是浮現出setTimeout,setInterval來控制樣式實現動畫，固然能夠，可是相比新出的requestAnimationFrame，它可以更高性能地執行動畫，這裏拋磚引玉，小夥伴們能夠嘗試去谷歌如下，後面我也會就這個新出的函數寫一篇詳細的指南。

文章中有錯誤歡迎指點～

The Next Day is Always a New Day

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。