CSS - 動畫

上一頁
下一頁

CSS 動畫允許在不同樣式之間建立平滑過渡，而無需使用 JavaScript。例如，

什麼是 CSS 動畫？

在 CSS 中，我們可以根據時間持續時間、使用者互動或狀態更改動態更改元素的樣式，這稱為 CSS 動畫。它使用`@keyframes`規則來建立動畫，並使用 animation 屬性將其應用於元素。

目錄


 

@keyframes 規則

`@keyframes`規則用於定義動畫的關鍵幀，指定動畫在各個階段時動畫元素的外觀。請考慮以下定義關鍵幀規則的程式碼。

.box{
    animation: colorChange 5s infinite;
}

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

此程式碼將為具有類`.box`的元素定義動畫，動畫名稱為 colorChange，執行 5 秒，並且無限次重複。

關鍵幀規則是為名為 colorChange 的動畫定義的。

  • 在動畫總持續時間的 0%（即 0 秒）時，背景顏色將為紅色。
  • 在總時間的 50%（即 2.5 秒）時，背景顏色更改為綠色。
  • 在總持續時間的 100%（即 5 秒）時，顏色更改為藍色。

動畫延遲屬性

我們可以使用animation-delay屬性設定動畫開始的延遲。檢視以下示例

您還可以為 animation-delay 屬性設定負值。如果您使用負值 -n，則動畫將開始，就好像它已經播放了 n 秒一樣。

示例

在此示例中，球將在 2 秒後開始向左移動。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute;
            left: 0; 

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set delay for animation */
            animation-delay: 2s; 
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

設定動畫迭代次數

我們可以使用animation-iteration-count屬性設定動畫重複的次數。

CSS 規範不支援此屬性的負值。它可以取正整數（例如，1、2、3 等）或關鍵字“infinite”作為值。

示例

在此示例中，我們將球的迭代次數設定為無限。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: absolute; 
            left: 0; 

            animation-name: moveRight;
            /* Set duration */
            animation-duration: 2s;
            /* Set number of time animation repeats */
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="ball"></div>
    </div>
</body>
</html>

動畫方向屬性

我們可以使用 animation-direction 屬性指定動畫執行的方向。

以下是 animation-direction 屬性的有效值

  • normal: 動畫按正常方式（向前）播放。這是預設值。
  • reverse: 動畫按相反方向（向後）播放。
  • alternate: 動畫首先向前播放，然後向後播放。
  • alternate-reverse: 動畫首先向後播放，然後向前播放。

示例

在此示例中，我們使用內聯 css 設定了 animation-direction 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;
            
            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>animation-direction: normal</h2>
    <div class="ball" 
         style="animation-direction: normal; ">
    </div>

    <h2>animation-direction: reverse</h2>
    <div class="ball" 
         style="animation-direction: reverse;">
    </div>

    <h2>animation-direction: alternate</h2>
    <div class="ball" 
         style="animation-direction: alternate;">
    </div>

    <h2>animation-direction: alternate-reverse</h2>
    <div class="ball" 
         style="animation-direction: alternate-reverse;">
    </div>
</body>
</html>

動畫時序函式

在 CSS 中，animation-timing-function屬性用於定義動畫的速度曲線。它可以取以下值。

  • ease: 動畫將先緩慢開始，然後加快，最後緩慢結束（預設值）。
  • linear: 從頭到尾速度相同的動畫。
  • ease-in: 動畫以緩慢開始。
  • ease-out: 動畫以緩慢結束。
  • ease-in-out: 動畫以緩慢開始和結束。
  • cubic-bezier(n,n,n,n): 這使我們能夠為速度定義自己的值。要了解更多資訊，請檢視三次貝塞爾函式文章。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .ball {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            border-radius: 50%;
            position: relative;
            left:0;
            
            animation-name: moveRight ;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        @keyframes moveRight {
            to {
                left: calc(100% - 50px);
            }
        }
    </style>
</head>

<body>
    <h2>linear</h2>
    <div class="ball" 
         style="animation-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div class="ball" 
         style="animation-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div class="ball" 
         style="animation-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div class="ball" 
         style="animation-timing-function: ease-out;">
    </div>
    
    <h2>ease-in-out</h2>
    <div class="ball" 
         style="animation-timing-function: ease-in-out;">
    </div>
    
    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div class="ball" 
         style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

設定動畫填充模式

animation-fill-mode屬性指定動畫未播放時（開始前、結束後或兩者）目標元素的樣式。

animation-fill-mode 屬性可以具有以下值

  • none: 動畫在開始前或結束後不會應用任何樣式。這是預設值。
  • forwards: 在動畫結束時，元素將保留最後一個關鍵幀規則設定的樣式。
  • backwards: 在動畫結束時，元素將保留第一個關鍵幀規則設定的樣式。
  • both: 動畫將遵循 forwards 和 backwards 的規則。

檢視以下程式碼的輸出以瞭解更多資訊

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            padding: 10px;
            background-color: green;
            color: white;
            font-size: 16px;
            margin: 20px;
            animation-duration: 2s;
            animation-name: changeColor;
        }

        /* Animation Definition */
        @keyframes changeColor {
            0% {
                background-color: blue;
            }
            100% {
                background-color: red ;
            }
        }

        /* Animation Fill Modes */
        .none {
            animation-fill-mode: none;
        }

        .forwards {
            animation-fill-mode: forwards;
        }

        .backwards {
            animation-fill-mode: backwards;
            animation-delay: 2s;
        }

        .both {
            animation-fill-mode: both;
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <div class="box none">None</div>
    <div class="box forwards">Forwards</div>
    <div class="box backwards">Backwards</div>
    <div class="box both">Both</div>
</body>
</html>

動畫簡寫屬性

在 CSS 中，animation屬性是以下屬性的簡寫

示例

<html lang="en">
<head>
    <style>
    .box {
        padding: 20px;
        background-color: #3498db;
        color: white;
        font-size: 16px;
        /* Name, duration, timing function, delay, repeat, direction, fill mode */
        animation: changeColor 2s ease-in-out 1s infinite alternate both;
    }

    /* Animation Definition */
    @keyframes changeColor {
        0% {
            background-color: #3498db;
        }
        100% {
            background-color: #e74c3c;
        }
    }

    </style>
</head>

<body>
    <div class="box">Animate Me!</div>
</body>
</html>

CSS 動畫屬性列表

以下是animation屬性的子屬性

屬性 描述 示例
animation-composition 指示當多個動畫對同一屬性具有同時影響時要應用的複合操作。
animation-delay 指示動畫是否應從動畫的開頭開始或在中途的某個位置開始，以及元素載入與動畫序列開始之間應經過多長時間。
animation-direction 指示動畫的初始迭代是向前還是向後，以及之後的迭代是否應繼續沿相同方向或每次執行序列時都更改方向。
animation-duration 指示動畫完成一個迴圈需要多長時間。
animation-fill-mode 描述動畫應用於其目標的預執行和後執行樣式。
animation-iteration-count 指示動畫應重複多少次。
animation-name 它給出描述動畫關鍵幀的 @keyframes at-rule 的名稱。
animation-play-state 指示動畫序列是否應播放或暫停。
animation-timing-function 描述用於指定動畫中關鍵幀過渡的加速曲線。
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.