CSS-@keyframes動畫輪播 首次加載閃動問題

問題描述：
  在用CSS3-@keyframes做圖片效果的時候（eg:輪播），會出現首次加載出現閃動，之後循環正常的現象。先寫解決方法，原理在底部。會簡單涉及到加載順序，感興趣的可瞭解一下。（demo簡單，見諒）如下：

HTML

<div id="pages"></div>

CSS

#pages {
	width: 100%;
	height: 600px;
	border: 1px solid red;
	animation: lunBo 5s infinite ;
	-moz-animation: lunBo 5s infinite ; /* Firefox */
	-webkit-animation: lunBo 5s infinite ; /* Safari and Chrome */
	-o-animation: lunBo 5s infinite ; /* Opera */
}

@keyframes lunBo{
	0%{
		background: url(img/BaLaGeZong.jpg);
	}
	34%{
		background: url(img/Bamboo.jpg);
	}
	67%{
		background: url(img/beiJIaErHu.jpg);
	}
	100%{
		background: url(img/bigPlayer.png);
	}
}

  這是因爲css3-@keyframes首次加載圖片會出現短暫的空白期，而我們此時沒有預先處理，就會出現閃動的情況，這時只要在他們第一次加載第一張圖片的時候就加載完本次所需的圖片，就不會出現短暫空白了。
比如：

#pages {
	//只添加background這一行代碼即可
	background: url(img/1.jpg),url(img/2.jpg),url(img/3.jpg),url(img/4.png);
	width: 100%;
	height: 600px;
	border: 1px solid red;
	animation: lunBo 5s infinite ;
	-moz-animation: lunBo 5s infinite ; /* Firefox */
	-webkit-animation: lunBo 5s infinite ; /* Safari and Chrome */
	-o-animation: lunBo 5s infinite ; /* Opera */
}

原理：
  寫在css裏面的圖片是以背景圖形式存在的，而寫在HTML裏的是以標籤的形式存在的。在網頁加載的過程中，以css背景圖存在的圖片會等結構加載完成（網頁的內容全部顯示以後），纔開始加載。而HTML的標籤是網頁結構的一部分，會在加載結構的的過程中加載。網頁的內容全部顯示以後纔開始加載。換句話講，網頁會先加載標籤的內容，在加載背景圖片，如果你引入了一個很大的圖片，那麼在這個圖片下載完成之前，之後的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容加載完成之後，纔開始加載背景圖片，不會影響你瀏覽網頁內容。網頁加載過程中相同的圖片會下載一次並保存在 緩存 裏，其他地方使用同樣的圖片就不會再去下載了，即圖片可以複用。所以會出現首次加載閃動，之後循環正常的現象。
  如果對加載比較感興趣，也稍加學習   預加載+懶加載