這篇文章主要介紹css3使用animation屬性如何實現背景顏色動態漸變的效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
首先我們來看一下CSS3關鍵幀動畫的基礎知識
讓我們先了解逐漸改變元素的動畫！在CSS 3 animation屬性中，您可以設置關鍵幀并繪制詳細的運動。關于動畫的時間和時機、無限的循環，只有CSS就可以指定了！
什么是關鍵幀？
關鍵幀（傳遞點）是在動畫中定義更改的幀。我們@keyframes定義元素如何隨每個關鍵幀而變化。為了使動畫與其關鍵幀匹配，您需要將@keyframes規則的名稱與為元素指定的animation-name屬性的名稱相匹配。
@keyframes規則的名稱聲明為“ @keyframes +任意名稱 ”。我將寫入0％到100％的關鍵幀信息。0％表示開始動畫，100％表示結束時間。0％from，100％可以用to替換。下面的示例是將背景顏色從紅色更改為橙色到粉紅色的關鍵框架。
@keyframes name {
0% { background: red; }
50% { background: orange; }
100% { background: pink; }
}說明：對于Chrome和Safari等WebKit瀏覽器，需要供應商前綴（-webkit-）。以編寫方式編寫“ -webkit-keyframes ” ，并在@和關鍵幀之間編寫-webkit-。
animation相關屬性
animation-name（動畫名）
@keyframes指定中定義的名稱。如果未指定此項，則不會執行動畫。此外，如果指定的動畫名稱與任何關鍵幀都不匹配，則不會執行該關鍵幀。
animation-duration（動畫持續時間）
通過“秒+ s”指定執行一個動畫的時間長度。例如，“5秒”持續5秒。如果為0，則不會執行。即使指定了負值，也會將其視為0。
animation-timing-function（動畫定時功能）
指定動畫的時間以及如何繼續。您可以通過調整動畫進度速度的比例來表達平滑運動。
ease（初期値）
ease-in
ease-out
ease-in-out
linear
animation-delay（動畫延遲）
讀取元素時，從“元素編號+ s”指定“動畫開始”的時間。例如，“5秒”持續5秒。初始值0將立即執行。
animation-iteration-count（動畫迭代計數）
指定使用數字重復動畫的次數。infinite要指定無限循環，請指定。
animation-direction（動畫方向）
指定重復動畫的方向。
normal ...正常方向播放（初始值）
alternate ...在正常和偶數時間以相反方向重新生成奇數次（返回并返回...）
reverse...向后播放
alternate-reverse...反向播放
animation-play-state（動畫播放狀態）
指定動畫暫停（paused）和播放（running）。但是，似乎沒有太多使用。
animation-fill-mode（動畫填充模式）
指定播放動畫之前和之后的狀態。
none（默認值）
forwards..播放后保持最后一個關鍵幀的狀態
backwards...在播放前應用第一個關鍵幀的狀態
both … forwards ......向前和向后都應用
屬性總結
animation屬性允許您分別指定每個屬性的值，用空格分隔。項目可以省略，但動畫名稱必須在執行前寫入。建議按以下順序列出。
animation-name（動畫名）
animation-duration（動畫持續時間）
animation-timing-function（動畫定時功能）
animation-delay（動畫延遲）
animation-iteration-count（動畫迭代計數）
animation-direction（動畫方向）
animation-fill-mode（動畫填充模式）
animation-play-state（動畫播放狀態）
body {
animation: test 5s ease 1s infinite forwards;
}下面我們來看看背景顏色改變的具體內容
在了解了基礎的知識之后，我們來詳細看看具體的實現方法。首先，將關鍵幀的名稱設置為“bg - color”，并將背景顏色設置為從0到100％的過渡。如果將相同的顏色設置為0％和100％，則在循環動畫時它會平滑移動。我們還將描述您為基于Webkit的瀏覽器啟用的版本。
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}由于此時指定整個網頁的背景顏色，body以animation指定屬性。值為“關鍵幀名稱”，bg-color“更改”在10秒內添加，“，10s”指定無限循環infinite。不要忘記webkit的版本。background-color讓我們指定基本背景顏色作為背景色，為動畫不起作用的情況做準備。
body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
p {
font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
text-align: center;
margin-top: 150px;
color: #fff;
}
</style>
</head>
<body>
<p>億速云</p>
</body>
</html>以上是css3使用animation屬性如何實現背景顏色動態漸變的效果的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
