animation在不需要觸發任何事件的情況下也可以隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果.
實現動畫需要給其新增屬性值:
1、animation-name：動畫名稱
指定要繫結到選擇器的關鍵幀的名稱。,必須與規則@keyframes(關鍵幀)配合使用，這個不用多說 name值自己設定即可。
@keyframes(關鍵幀) ，指動畫在某一幀產生的變化，結合使用為animation-name:mymove;指定關鍵幀的名字
@keyframes mymove{} 關鍵幀實現動畫變化，關鍵幀一般來說有兩中用法:
語法一：@keyframes mymove
to1}
語法二：@keyframes mymove 0% = from
50%…
100% 100% = to
}2、animation-duration：持續時間
定義動畫完成乙個週期需要多少秒或毫秒，是指動畫的持續時間，animation-duration:3s;指動畫乙個週期的時間為3s；
有了一二兩個屬性即可簡單實現乙個動畫
圖中**即可實現紅色盒子從大變小的過程，時間為2秒，預設為乙個週期，transform: scale()是縮放屬性
3、animation-delay： 動畫延遲時間
定義動畫什麼時候開始。單位可以是負值，-2s表示動畫立馬開始，但跳過 2 秒進入動畫，即前2秒的動畫不執行，直接跳過前2秒進入動畫
假設line1 是段12s水平移動的動畫，一共為1200個畫素，一秒移動100畫素，那麼預設是從最左端1秒100直到最右端，當delay是-2s時，動畫將從200px位置開始移動，跳過前200的移動軌跡，當delay是2s時，動畫將延遲2s從初始位置開始移動。
4、animation-timing-function 動畫執行軌跡
指定動畫將如何完成乙個週期。
|值 說明
linear 動畫從頭到尾的速度是相同的。
ease 預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。
step-start 在變化過程中，都是以下一幀的顯示效果來填充間隔動畫
step-end 在變化過程中，都是以上一幀的顯示效果來填充間隔動畫
steps() 可傳入兩個引數，第乙個是大於0的整數，將動畫等分成指定數目的小間隔動畫，根據第二個引數來決定顯示效果。第二個引數設定後和step-start，step-end同義，在分成的小間隔動畫中判斷顯示效果。值說明
linear
動畫從頭到尾的速度是相同的。
ease
預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in
動畫以低速開始，由慢到快。
ease-out
動畫以低速結束，由快到慢。
ease-in-out
動畫以低速開始和結束，由慢到快再到慢。
step-start
馬上跳到動畫每一結束楨的狀態 (實現逐幀動畫效果)
5、animation-iteration-count 動畫運動次數值說明n
infinite
6、animation-direction 動畫方向值
說明normal
正常方向 0% —— 100%
reverse
反方向執行 100% —— 0%
alternate
動畫先正常執行再反方向執行，並持續交替執行 ， 0% — 100% — 0%；
alternate-reverse
動畫先反執行再正方向執行，並持續交替執行。100% —— 0% —— 100%
7、animation-fill-mode 決定動畫起始狀態
none (預設值) : 在運動結束之後回到初始位置，在延遲的情況下，讓0%在延遲後生效。
backwards : 在延遲的情況下，讓0%在延遲前生效，這個表示如果2s的延遲，那麼這兩秒內將會把元素顯示成動畫第一幀的狀態。
forwards : 在運動結束的之後，停到結束位置 （重點記憶）
both : backwards和forwards同時生效
animation-play-state:running | paused;
running:運動 (預設值)
paused: 暫停
當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行
animation的屬性值
在逆戰班學習的第4周 animation的屬性值 1 animation name 檢索或設定物件所應用的動畫名稱 必須與規則 keyframes配合使用，eg keyframes mymove animation name mymove 2 animation duration 檢索或設定物件動畫...
用animation的steps屬性製作幀動畫
臥槽真是個神奇的ui boy。於是我順著他的思路，用上了animation在timing function中的steps屬性。先來看看ui給的圖吧，是這樣的 注 寬度1200px x,y正數值越大，背景圖越向右下角偏移。所以動畫的 如下 但是這都不是我們需要的效果，因為幀動畫的關鍵在於 瞬變 在an...
css屬性之幀動畫屬性（animation）
在介紹animation屬性之前，先來認識一下 keyframes規則。通過 keyframes規則可以建立動畫，建立動畫是逐步改變乙個css樣式到另乙個css樣式來實現的，css樣式可以設定多個來實現動畫過程，指定動畫變化時用 或者用關鍵字從 from 到 to 這是和 0 開始到 100 結束相...