介紹

今天我來告訴大家如何製作動畫。我們將在這篇文章中看到所有必要的動畫屬性。你可以在我的github上取得程式碼。那麼就讓我們開始吧！

卡通

動畫是用來增強網站外觀的屬性。它給用戶帶來了很好的干擾，也可以用來向人們展示網站的目標。

基本動畫

第一個動畫：改變正方形的顏色

Square

這裡我做了一個藍色的正方形，然後給它一些樣式。任何顏色都可以！

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

現在我們將製作一個動畫。

第1步：製作動畫@keyframes

製作動畫需要設定@keyframes。它保存您想要在某個時間賦予元素的樣式，然後您需要給它一個名稱。我的情況是我正在改變方塊的顏色。所以，我給它取了一個名字：顏色。現在，您可以用兩種類型編寫@keyframes，例如

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

如果你想執行一個有兩個步驟的動畫，你可以使用 to 和 from。或者您可以使用百分比值來完成，例如

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

當您必須在動畫中執行多個任務時使用百分比值，但您可以同時使用兩者！我通常對動畫使用百分比值

第二步：設定方塊的動畫屬性。

現在，我們將動畫屬性放在方形上。為此，您需要了解動畫的屬性。我會告訴你那些最常用的：

• animation-name - 用於告訴瀏覽器您要使用哪個@keyframes。就我而言，我的 @keyframes 名稱是 color.

• animation-duration - 用於告訴動畫應該在多長時間內完成。

• animation-iteration-count - 用來告訴應該執行多少次。

您可以在 w3school 或任何其他網站上了解更多有關動畫的資訊。現在，我們將使用動畫屬性，但我們將其寫在一行中，如下所示：

    animation: color 4s infinite;

CSS中的動畫有7個屬性。為了在單行中使用動畫屬性，我首先編寫動畫名稱（顏色），然後編寫動畫持續時間（在我的例子中為 4 秒），然後將動畫迭代計數設為無限。如果只想使用一次動畫，可以設定為 1 。您也可以自行設定動畫屬性的值。

現在，如果您看到您的方塊，它會一次又一次地改變顏色！現在，我們將使其在改變顏色的同時移動。

第二個動畫：移動方塊並改變顏色！

為此，我將使用同一個方塊，並為此製作另一個@keyframes。我們將使用與先前相同的步驟

第1步：製作動畫@keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

在這裡，我創建了一個名為 move 的 @keyframes，並為此動畫使用了三個步驟。首先，我將左側設定為 0px 和背景顏色。然後在 50% 時，我將 left 設為 300px 並更改背景顏色，最後，我再次將 left 設為 0px，這樣它將出現在第一個位置。

第二步：設定方塊的動畫屬性

    animation: move 4s infinite;

在這裡，我將animation-name設定為move，然後animation-duration設定為4s，animation-iteration-count設定為無限。您可以再次根據您的選擇設定動畫值。並且不要忘記註釋第一個動畫屬性，否則可能會出錯！

結論

由於這篇文章已經太長了，所以我們將在另一篇文章中繼續。就目前而言，今天就足夠了。我希望你能理解。我盡力講述關於動畫的所有事情。並在評論中告訴我下一篇文章該寫什麼主題。感謝您的閱讀！