今天我將告訴你如何製作動畫。我們將在這篇文章中看到所有必要的動畫屬性。你可以在我的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中文網其他相關文章！
