Transition 與 animation

Transition 漸變

讓物件能在特定時間內執行一連串動作，需要事件觸發。常用於滑鼠事件（:hover、:active、:focus、click）或鍵盤輸入時。在網頁上像是按鈕或是選單會使用。基本上主流瀏覽器都已經支援。

使用

transition: property duration timing-function delay;

Property：物件屬性。例如：長、寬、位置、字體大小、背景顏色。

Duration：動畫時間。預設為 0，需設定才會產生動作。

Timing Function：動畫進行的速度曲線，例如：ease（預設值）、linear、ease-in、ease-out、ease-in-out 或 cubic-bezier(n,n,n,n)（自定義函數）。關於自訂曲線可參考工具。

Delay：延遲動畫開始的時間。

Code

e.g.

.box {
  width: 200px;
  height: 200px;
  background: #aaa;
  transition: width 1s ease-out 2s;
}

.box:hover {
  width: 300px;
  height: 300px;
  background: #fff;
}

Animation 動畫

網頁加載時會直接執行，可以自行控制各階段動畫的變化。

使用

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

Name：@keyframes 動畫名稱。

Duration：動畫時間。

Timing Function：動畫進行的速度曲線。

linear(線性)：動態有時看起來相當機械化也不太自然，視情況用。

ease(初始與結束減速，中間加速)。

ease-in(緩入)：會使結尾加速。

ease-out(緩出)：通常較適用於使用者介面，較符合現實中的物理狀態。

ease-in-out(緩入緩出)：適當使用，有時候可以達到比純 ease-out 更強的戲劇感。動畫時間不要過長，通常 300ms-500ms 的範圍會比較適當。也可自行定義為貝茲曲線的數值(n1,n2,n3,n4) n1-n4 為介於 0-1 之間的小數。

Delay：延遲動畫開始的時間，預設值是 0。單位為秒(s)或毫秒(ms)，可以設定負值，設定負值則意味著立即開始動畫，而且動畫也會提早結束。

Iteration Count：動畫重複次數。預設值是 1，可設定為 n (n為正整數)或 infinite (無現次數循環)。

Direction：動畫播放方向。動畫是否會倒帶，預設值是 normal (不倒帶)。不倒帶(normal)或倒帶(alternate)，倒帶的意思是第1、3、5次順播放，第2、4、6次逆播放。

Fill Mode：動畫開始前後是否保持動畫設定。動畫結束之後的狀態。

none：動畫一結束後，初始的樣子

forwards：動畫結束後保持最後結束的樣子

backwards：沒有設定 animation-delay 跟第一格關鍵影格的話，看起來會跟 none 的效果一樣。若有設定的話，動畫延遲時間內會照第一格關鍵影格的樣式(改變顏色之類)顯示。結束後回覆初始狀態。

both

Play State：控制動畫播放狀態。設定動畫狀態為播放(running)或暫停播放(paused)。

配合關鍵影格 @keyframes 達到效果。@keyframes 裡面可以放幾乎全部的 css 屬性，但 @keyframes 裡面寫 !important 是不會產生效果。

@keyframes 是動畫劇本，.className 是演出劇本角色，因此在要執行動畫的 .ClassName 加上 animation: name;，@keyframes 而就放入要執行的動畫，加上開始跟結束。

ps.數字要加上 %。

Code

.className{
...
animation: name;
}

@keyframes name {
from{
//動畫開始效果
}
to {
//動畫結束效果
}
}

or

@keyframes name{
    0%{
      width:50px;
    }
    50%{
      width:100px;
    }
    100%{
      width:150px;
    }
}

ps. 不要混用兩種寫法

e.g.

Code

.wrap {
    padding-top: 1%;
    margin: 0 auto;
    width: 500px;
    .box {
        text-align: center;
        width: 100px;
        height: 100px;
        background: #ffc04c;
        border-radius: 100px;
        animation: move 2s infinite;
    }
}

@keyframes move {
    0% {
        border-radius: 100px;
        transition: all 0.25s;
    }
    20% {
        border-radius: 60px;
        background-color: #5cff47;
        transition: all 0.25s;
    }
    40% {
        border-radius: 0px;
        background-color: #ff2970;
        transition: all 0.25s;
    }
    60% {
        border-radius: 60px;
        background-color: #22d1f0;
        transition: all 0.25s;
    }
    100% {
        border-radius: 100px;
        background-color: #ffc04c;
        transition: all 0.25s;
    }
}

參考：
https://hsuchihting.github.io/css/20200713/3105415432/
https://ithelp.ithome.com.tw/articles/10200247
https://ithelp.ithome.com.tw/articles/10197303
https://cythilya.github.io/2017/08/27/css-animation/