網頁架構（html）、網頁樣式（css）、JavaScript之前的關係
眾所周知網頁前端由網頁架構（html）、網頁樣式（css）、網頁互動（JavaScript）三部分組成，對於新手來說理解他們之前的關係有些困難，我們可以把網頁前端比成一座房子，html代表房子的基礎和架構、css表示房子的裝修風格是中式、歐式還是其他風格的，JavaScript代表這個房子中能夠產生交互的東西，比如門和窗戶它們都有打開和關閉的動作。理解了它們三者之間的關係，再往下理解學習其他關於網站的內容，就不會出現“知其然不知其所以然”的情況。應後臺粉絲留言，今天主要給大家講解一下css中動畫，如果漏掉內容望大家補充！
web前端中的動畫分類
再講css動畫前，為什麼要說明html、css、JavaScript之間的關係，是因為網站前臺動畫三者類型的動畫，它們分別是css動畫、FLASH動畫（gif動態圖）、JavaScript動畫。這三種動畫是網頁前端工程師經常使用到的。css動畫可以對動畫優化，只能做簡單的動畫，有很多限制（不能中間反轉動畫、不能控制時間靈活度等）。FLASH動畫、gif圖需要瀏覽器插件支持，客戶瀏覽器沒有安裝插件，動畫播放就會出現問題。JavaScript腳本動畫能力很強，可以完成很多的動畫動作，缺點就是學習難度要高些。如果做的是pc端動畫建議使用JavaScript，是移動端建議使用css+html5。
css中的動畫
動畫是在css中表現就是元素從一種樣式逐漸變化為另一種樣式的效果（對的動畫定義不清楚，先查一下資料。），css中動畫通過animation和@keyframes 規則實現的。@keyframes 規則定義動畫每一幀是什麼（對幀不瞭解可以查一下概念），而animation定義每一幀的動作執行。
animation屬性
animation有8個屬性如下圖所示：
@keyframes規則
@keyframes規則規定發生的時間，或過關鍵詞 "from" 和 "to"，等價於 0% （開始時間）和 100%（結束時間）。建議使用百分比定義選擇器。
上面animation-name: myfirst;規定了動畫規則是myfist，animation-duration: 5s;規定了動畫持續5s，animation-timing-function: linear;規定動畫從頭到尾速度是相同的。animation-delay: 2s;動畫開始延時2s，animation-iteration-count: infinite;規定動畫無限次播放，animation-direction: alternate;規定動畫輪流方向播放，animation-play-state: running;規定動畫現在播放。
上面這段代碼是@keyframes規則，0% {background:red; left:0px; top:0px;}表示動畫%0時背景是紅色原地不動。100% {background:red; left:200px; top:0px;}表示動畫在100%時再次改變紅色相對左移200px。代碼運行後的效果是紅色方塊在瀏覽器左上方不斷左右移動。
關於“css中的動畫”先聊到這，每天學習一個知識點，每日寄語-“人們最害怕的是無常變化，要學習適應環境的變化和變化中另謀創新，並不是停留在變化的痛苦中。”
閱讀更多 編程小小學生 的文章
關鍵字: 網頁 編程語言 JavaScript
