2023 iThome 鐵人賽

DAY 16

Modern Web

下一代 CSS 解決方案：Master CSS 具增強語法的虛擬 CSS 語言系列第 16 篇

Master CSS 轉場（Transition）與動畫（Animation）

15th鐵人賽

miru129

團隊啾嚕咕嚕跳起來

2023-10-01 15:31:05

2264 瀏覽

分享至

前言

原生 CSS 在設定轉場或動畫是，常常需要寫又臭又長的 transition 與 animation，在 Master CSS 你除了可以使用原生的寫法外，也可以使用具有聯想象徵意義的簡寫來設定轉場與動畫，讓類別更為乾淨簡潔一致。

轉場（Transition）

原生 CSS 設定轉場使用的是 transition，可以搭配 transition-delay、transition-duration 等等屬性來設定轉場的細節屬性，Master CSS 使用波浪符號 ~ 來表示 transition 屬性簡寫。

~ 表示 **transition，**設計符號的波浪曲線，波浪曲線帶有點轉變、過渡的意思，當你看到波浪符號也很好的聯想到過渡的效果。

語法：transition:name|duration… / ~name|duration…

範例：transition:padding|300ms|ease-in / ~padding|300ms|ease-in

Master CSS 類別	產生的 CSS 規則
transition:name\|duration / ~name\|duration	transition: name duration
transition:name\|duration,… / ~:name\|duration,…	transition: name duration, …
transition:name\|duration\|delay / ~name\|duration\|delay	transition: name duration delay
transition:name\|duration\|timing-function / ~name\|duration\|timing-function	transition: name duration timing-function
transition:name\|duration\|timing-function\|delay / ~name\|duration\|timing-function\|delay	transition: name duration timing-function delay

舉個例子來說，下列這幾個 transition 屬性：

transition-delay
transition-duration
transition-property
transition-timing-function

要在同一個元素類別中使用，你可以使用像下面程式碼使用簡寫 ~padding|300ms|ease-in 來描述

<div class="...">
  <div class="
    bg:blue-60/.2
    {bg:red-60/.2;px:50}:hover 
    ~padding|300ms|ease-in"
  >
    ~padding|300ms|ease-in
  </div>
</div>

效果看起來像這樣

產生出來的 CSS 規則

.\~padding\|300ms\|ease-in {
    transition: padding 300ms ease-in;
}

動畫（Animation）

原生 CSS 設定動畫的方式使用的是 animation 屬性，但我們通常需要去定義動畫所需要的 keyframes 過程中比較麻煩，Master CSS 提供了一些官方製作的 keyframes，可以讓我們快速的來套用動畫。

我們在類別撰寫名稱的時候，可以透過簡寫 @ 來表示設定 animation 屬性，at 小老鼠符號 @ 之所以表示 animation 屬性**，**設計自動畫需要定義 keyframes 的語法 @keyframes fade {…}，@ 符號內也正好對應 animation 的首字 a，我們就可以很好的聯想到動畫 animation 。

語法：animation:name|duration|… / ＠name|duration|…

範例：animation:fade|1s|infinite / @heart|1s|infinite

舉個例子，設定預設的 fade 動畫

<div class="...">
  <span class="f:12">@fade|1s|infinite</sapn>
  <div class="
    bg:blue-60/.2
    b:5|solid|blue-60
    @fade|1s|infinite"
  >
  </div>
</div>

效果看起來像這樣

產生出來的 CSS 規則

.\@fade\|1s\|infinite {
    animation: 1s ease 0s infinite normal none running fade;
}

官方預設的 Keyframes

Master CSS 類別	產生的 CSS 規則
@fade\|1s\|infinite	animation: fade 1s infinite
@fade\|1s\|infinite\|reverse	animation: fade 1s infinite reverse
@ping\|1s\|infinite	animation: ping 1s infinite
@flash\|1s\|infinite	animation: flash 1s infinite
@heart\|1s\|infinite	animation: heart 1s infinite
@jump\|1s\|infinite	animation: jump 1s infinite
@pulse\|1s\|infinite	animation: pulse 1s infinite
@rotate\|1s\|infinite\|linear	animation: rotate 1s infinite linear
@rotate\|1s\|infinite\|linear\|reverse	animation: rotate 1s infinite linear reverse
@shake\|1s\|infinite	animation: shake 1s infinite
@zoom\|1s\|infinite	animation: zoom 1s infinite
@float\|3s\|ease-in-out\|infinite	animation: float 3s ease-in-out infinite

使用自訂的 Keyframes

例如已經存在一個名為 demo 的 keyframes：

@keyframes demo {
    from {
        left: 0px;
        top: 0px;
        background: rgba(83, 140, 238, .2);
        border-color: rgb(83, 140, 238);
    }

    to {
        left: 150px;
        top: 0px;
        background: rgba(235, 95, 99, .5);
        border-color: rgb(235, 95, 99);
    }
}

你可以直接使用 animation:demo 或 @demo 來指定這個 keyframes，例如下面程式碼：

<div class="...">
  <span class="f:12">@demo|ease-in|1s|infinite|alternate</sapn>
  <div class="
    bg:blue-60/.2
    b:5|solid|blue-60
    @demo|ease-in|1s|infinite|alternate"
  >
  </div>
</div>

效果看起來像這樣

產生出來的 CSS 規則

.\@demo\|ease-in\|1s\|infinite\|alternate {
    animation: 1s ease-in 0s infinite alternate none running demo;
}

常見用法

Ping indicator

使用 ping 動畫，製作綠色閃爍的點點，表示正在營業中或運作中的指示。

<svg class="inline-block fill:green-75 8x8 overflow:visible" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
    <circle class="@ping|1s|infinite transform:center" cx="4" cy="4" r="4" />
    <circle cx="4" cy="4" r="4" />
</svg>

Rotate indicator

使用 rotate 動畫，製作逆時針旋轉的效果，表示正在恢復的指示。

<svg class="@rotate|1s|linear|reverse|infinite" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
    <path d="M18.37 7.16l0 .01"></path>
    <path d="M13 19.94l0 .01"></path>
    <path d="M16.84 18.37l0 .01"></path>
    <path d="M19.37 15.1l0 .01"></path>
    <path d="M19.94 11l0 .01"></path>
</svg>

進階用法

Loading spinner

使用 fade 動畫，搭配延遲的屬性來來個別建立 SVG 路徑中顯示的時機，適用微調或漸變，整個效果就比較不像單純的旋轉那樣死板。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|0s" d="M7.75 7.75l-2.15 -2.15"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.125s" d="M12 6l0 -3"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.25s" d="M16.25 7.75l2.15 -2.15"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.375s" d="M18 12l3 0"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.5s" d="M16.25 16.25l2.15 2.15"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.625s" d="M12 18l0 3"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.75s" d="M7.75 16.25l-2.15 2.15"></path>
    <path class="@fade|1s|ease-out|reverse|infinite|.875s" d="M6 12l-3 0"></path>
</svg>