製作漸變顏色背景
利用 CSS 中的 linear-gradient、animation 及 keyframes，無需要任何 javascript 的輔助，便可以製作出漸變背景顏色的特別效果：
HTML
<div id="title" class="anim_back">
TESTING TITLE
</div>CSS
#title {
padding: 20px;
font-size: 3em;
color:#ffffff;
text-align:center;
}
.anim_back {
background-image: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671);
background-size: 500%;
animation: bg-animation 8s infinite alternate;
}
@keyframes bg-animation{
0% {
background-position: left;
}
100%{
background-position: right;
}
}以自定的漸變顏色（此例子使用 linear-gradient）作為區域的背景（background-image）
當使用漸變色作為背景時，系統會自動將整個顏色段完整顯示出來。加入 background-size: 500% 的作用是令漸變色背景大於所能顯示的範圍，亦即是只能顯示漸變色中的某一部份顏色。
因為漸變顏色背景比顯示範圍大的關係，現在只要設定 background-position 到不同位置，便能做出顯示不同顏色段的效果。
將變更 background-position 的動作設定成 keyframes，由最初（0%）位置最左，到最尾（100%）位置最右，並給此 keyframes 一個名稱（bg-animation）
利用剛建立的 bg-amination 設定 animation，設定由 0% 到 100% 所需的時間（8s），infinite 表示無限循環，alternate 表示當動畫到最尾之後便自動反方向執行，這樣可令漸變效果更平滑。