今天我們要來玩玩 CSS 動畫。CSS 動畫有兩種:

  • @keyframes - 動作效果

  • transition - 轉場效果

    我們今天都拿 PowerPoint 來舉例,雖然感覺現在的學生都快只認識 Canva 了 (順帶一提 Canva 就是 CSS 動畫)

你可以想像 @Keyframes 是 PowerPoint 的動畫

Powerpoint 動畫
Powerpoint 動畫

而且是一載入網頁就執行。當然我們可以透過 JavaScript 來指定執行的時間 (比如說滾動到元素的時候)

而 Transition 是轉場裡面的轉化效果

Transition
Transition

當元素的外觀因為各種原因 CSS 被改變 (比如說滑鼠滑過,JavaScript 設定,打開 F12 亂搞),會平滑的轉換過去。我們先來講 Transition 因為他比較簡單。語法如下

1transition: 要改的屬性 持續時間 速度曲線 延遲;
2transition: background 4s ease-in-out 1s;

每一個屬性都可以分開設定,但真的不用跟自己過意不去。有興趣的連結下收

每一個屬性都可以分開設定,也可以省略一些屬性不寫。比如說

1transition: background 1s;

你可以在後面用逗號分隔其他元素

1transition:
2    background 1s,
3    color 2s;

秒數也可以用毫秒 ms,但我習慣使用秒因為比較短。如果是零點幾零可以省略。比如說以下幾個都是一樣效果

1transition: background 500ms;
2transition: background 0.5s;
3transition: background 0.5s; /* 是不是看起來超舒服!*/

以下是一個按鈕範例。你可以看到放大屬性 scale 有設定 transition 所以會漸變,而背景顏色則沒有。

https://codepen.io/edit-mr/pen/mdaPYLv

按鈕範例
按鈕範例

1<a href="">按鈕</a>
1a:hover {
2    background-color: #ffffff4a;
3    transform: scale(1.2);
4}
5
6a {
7    transition: transform 0.3s ease-out;
8    /* 以下只是裝飾 */
9    display: block;
10    color: #fff;
11    text-decoration: none;
12    font-family: sans-serif;
13    font-size: 5em;
14    border: #fff solid 5px;
15    padding: 1rem;
16    text-align: center;
17    width: 3em;
18}
19
20body {
21    background: #000;
22    min-height: 100svh;
23    /*   昨天講的置中 */
24    display: flex;
25    justify-content: center;
26    align-items: center;
27}

記得設定 display:none 不會有淡出效果,請用 opacity:0; 然後 pointer-event: none; 以防止誤觸。

下面是一個設定 Width 的範例

https://codepen.io/edit-mr/pen/RwEamev

Width Transition
Width Transition

1a::after {
2    transition: width 0.5s ease-out;
3    content: "";
4    height: 2px;
5    display: block;
6    background: red;
7    width: 0em;
8}
9a:hover::after,
10a:active::after {
11    width: 100%;
12}
13/* 以下只是裝飾 */
14a {
15    display: block;
16    color: #fff;
17    text-decoration: none;
18    font-family: sans-serif;
19    font-size: 5em;
20    text-align: center;
21    cursor: pointer;
22}
23body {
24    background: #000;
25    min-height: 100svh;
26    /*   昨天講的置中 */
27    display: flex;
28    justify-content: center;
29    align-items: center;
30}

@keyframes

要使用 keyframes 我們需要先建立一個動畫,再套用到元素上。他的語法是

1@keyframes 動畫名稱 {
2    0% {
3        /* 要套用的 CSS */
4    }
5    30% {
6        /* 要套用的 CSS */
7    }
8    /* ...(中間可以放更多) */
9    100% {
10        /* 要套用的 CSS */
11    }
12}

以第一天我們做的汽車動畫為例。想要從最左邊移動到中間,也就是 left 從 0 變到 50%。動畫可以這樣寫:

1@keyframes drive {
2    0% {
3        left: 0;
4    }
5    100% {
6        left: 50%;
7    }
8}

如果是從 0%~100% 可以寫 from 和 to

1@keyframes drive {
2    from {
3        left: 0;
4    }
5    to {
6        left: 50%;
7    }
8}

因為我們本來 left 就在 0 了所以可以省略。只有一行 CSS 也分號也可以省略

1@keyframes drive {
2    to {
3        left: 50%;
4    }
5}

最後再套用到元素上就好啦~

1animation: drive 3s forwards;

https://codepen.io/edit-mr/pen/NWeKpjj

drive 3s forwards
drive 3s forwards

CSS Animation 的語法如下

1/* @keyframes 持續時間 | 速度曲線 | 延遲 | 次數 | 方向 | 填充模式 | 播放狀態 | 名稱 */
2animation: 3s ease-in 1s 2 reverse both paused slidein;
3
4/* 持續三秒,延遲一秒 */
5animation: 3s linear 1s slidein;
6/* 和上面一樣,順序可以自由變換,我自己習慣這樣寫比較好讀 */
7animation: slidein 3s linear 1s;
8/* 這樣效果也一樣,記得前面的是時長,後面是延遲 */
9animation: slidein linear 3s 1s;
10
11/* 多重動畫 */
12animation:
13    3s linear slidein,
14    3s ease-out 5s slideout;

速度曲線

我們在前面不管是設定 transition 還是 animation 都有時間曲線可以設定。可以根據你的需求做調整,也可以使用 cubic-bezier() 來自訂曲線。你可以使用這個網站生成看看,不過我覺得內建的已經很夠用了。

Ease
Ease

圖片來源:Max

線上 Cubic 工具
線上 Cubic 工具

設定速度曲線可以讓你的動畫更流暢,不會有突然爆走的感覺,也可以讓動畫更有質感。對於超連結 hover 做特效建議可以設定成 ease-out ,因為滑鼠動畫通常大家會希望有即時反應,但又不希望突然結束。

以上就是我今天的分享,歡迎在 InstagramGoogle 新聞追蹤毛哥EM資訊密技,也歡迎訂閱我新開的YouTube 頻道:網棧

我是毛哥EM,讓我們明天再見。

毛哥EM

一位喜歡把簡單的事,做得不簡單的高三生。