前端開發來說，通過動畫來提升交互效果是很常見的。在很早以前，做web動畫主要通過javascript或者jquery或者flash這樣的手段，非常麻煩，自打有了ccs3，做動畫就太方便了，只需幾行css代碼就可以搞定。

這里我們就演示一個常見的循環滾動效果，任務是這樣：先準備一個圖片，平鋪到頁面上充滿整個屏幕，然后就讓畫面一直向上循環滾動，形成無邊無際的感覺。

雖然可以從網上搜到一些類似的代碼，但是魚龍混雜，無關緊要的代碼非常多，不夠純粹。如果要弄明白動畫的原理，只有自己動手做一遍才能真正消化吃透。所以我們來一步步原創這個代碼，排除所有不必要的基礎樣式，只說要點，3個步驟你就可以完全掌握其精髓！

第一步：布局

首先，滾動的圖片需要放在一個容器里，一行html代碼即可完成：

第二步：把圖片放進容器

css中body的邊界設為0，把容器設高度100%以充滿屏幕，再調用背景圖pic.png

第三部：讓畫面動起來

咱不做標題黨，循環滾動靠的就是3行css動起來的。

先是1行 -webkit-animation屬性：4個參數分別表示：動畫名稱scroll，1秒時長，移動速度為線性的，無限循環。

然后是對應的關鍵幀 @-webkit-keyframes 屬性，這是自己定義的動畫規則，只需寫2行規則即可：

原理：動畫就是畫從一個地方動到另一個地方。對普通滾動效果來說，有起點和終點這兩個節點的位置就夠了。所以我們用0%和100%分別表示起點和終點，指定2個背景圖的xy位置坐標即可。圖片會在規定時間內從起點移動到終點，并循環下去，數值是負表示是向上移動。320px正好是圖片的高度，這樣循環的時候是無縫銜接的。

好了，最終完整的代碼如下，是不是很精練呢？保存成 index.html 即可

代碼寫完了，還要記得在當前目錄要有pic.png這個圖片哦，我隨便畫了幾筆，絕無觀賞性，建議自己找個好看點的圖片來代替。

現在用瀏覽器打開index.html即可看到效果，比較魔性的地方在于，如果你盯著看久了，關閉窗口以后會出現幻覺，仿佛整個顯示器都在向上飛，哈哈！

最后我們來說說瀏覽器兼容性問題：

大家可能注意到了，前面那2個古怪的 -webkit-animation, @-webkit-keyframes 這里的-webkit-其實是一個前綴，animation和@keyframes才是CSS的標準屬性。

當加上-webkit-后，就形成了一個針對特殊瀏覽器的專有屬性，表示用在谷歌的chrome和蘋果的safari瀏覽器上。此外還有-moz前綴代表針對firefox瀏覽器的私有屬性。

所以我們在用到css3的一些特性的時候，經常使用一大堆的重復性的代碼，比如我們今天的這個代碼，有人會寫成這個樣子：

一個簡單的動畫就要寫這么多冗余的代碼，為的只是支持一些舊的瀏覽器，有必要嗎？為什么在這個例子中我們僅僅采用了-webkit-而沒有使用其它專有屬性呢？

因為現在已經是2019年了！谷歌蘋果的瀏覽器是主流，占據了絕大部分，而其它小眾瀏覽器也大多能夠兼容他們，在版本上，大部分人安裝瀏覽器是直接下載新版本安裝使用，而非找出家里陳年的老軟盤、老光盤去安裝，家中的老電腦也早已升級不知多少回了，所以也幾乎沒有機會使用低版本的瀏覽器了！

至于微軟的IE，就更別提了，IE9以前不支持動畫的，只能用js或者jquery來寫動畫，直到IE10才支持css動畫，隨后IE被放棄，主推Edge，搞了幾天越來越頭大干脆也放棄，現在直接使用chrome內核了，所以針對ie的兼容性除非有特殊要求已經無需考慮。

你在網上能看到的范例代碼，如果有寫成那么復雜臃腫的，估計也都是3-5年前發的老文，或者抄來抄去不做思考的搬磚工留下的“初學者”筆記。

我們不仿測試一下幾款主流瀏覽器的情況看看，結論：

測試結果表明，-webkit-的寫法在4款不同內核的瀏覽器上都能正常使用，所以我們的代碼因此能得以簡化。

當然，這個例子也有局限性，比如你看，只有蘋果safari不支持標準寫法，萬一將來他改邪歸正了呢？畢竟標準寫法才是眾望所歸不是？使用針對個別瀏覽器的私有屬性寫法，雖可用但畢竟有些怪怪的，將來怎么樣還很難說呢。這樣看來，如果使用古老的處理辦法，重復N次為每個專屬瀏覽器各寫一份代碼，除了辣眼睛也真沒什么錯。

瀏覽器的兼容問題涉及面實在是非常廣，三言兩語還真說不完，以后會專門來講。