CSS之動態變換背景顏色

先上效果圖

html:

<div class="header">
    <h1>GCCHRN'S BLOG</h1>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">首頁</a></li>
        <li role="presentation"><a href="#">分類</a></li>
        <li role="presentation"><a href="#">歸檔</a></li>
        <li role="presentation"><a href="#">關於</a></li>
    </ul>
</div>

CSS:

<style type="text/css">
    .header{		
	padding: 40px 30px 60px 30px;
	text-align: center;
	animation:myfirst 5s infinite; /*animation 時間 播放次數*/
	animation-direction:alternate; /*是否循環交替反向播放動畫*/    }
@keyframes myfirst
{
	0% {background:#87CEFF;}
	25% {background:#54FF9F;}
	50% {background:#7CCD7C;}
	75% {background:#63B8FF;}
	100% {background:#00FFFF;}
}

	</style>