如何用CSS製作動畫？

介紹

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

卡通

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

基本動畫

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

<div id="square">Square</div>

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

#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;
    }
}

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

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

現在，我們將對廣場上的屬性進行動畫處理。為此，您需要了解動畫的屬性。我會告訴你那些最常用的：

• 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，這樣它就會出現在第一個位置。

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

    animation: move 4s infinite;

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

結論

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

以上是如何用CSS製作動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！