一、動畫實例
1、平移效果
<!DOCTYPE html> <html> <head> <title>測試</title> <style> .test { width: 5px; height: 5px; background: #000000; border-radius: 5px; animation: move 1s linear; } @keyframes move{ 100%{ margin-left: 50px; } } </style> </head> <body> <div class="test"></div> </body> </html>
在div的class類樣式中添加animation屬性則爲添加動畫效果，對應值爲動畫、維持/消耗時間以及一些附屬的屬性。
如上代碼中，通過@keyframes定義動畫效果，move這個效果則是距離左邊距50像素，搭配限制的時間後則爲1秒內完成從左側無邊距到左邊距50的變化，這個過程就是動畫效果的實現。
附屬屬性中的linear代表勻速移動，其他類似的速度相關屬性還有ease（默認，先慢開始再加快最後變慢結束）、ease-in（先慢開始然後加快結束）、ease-out（先快開始然後變慢結束）、ease-in-out（先慢後快後慢，和ease類似）。
二、動畫屬性詳解
1、animation-name：
動畫名稱，添加動畫效果時該屬性必要的，默認爲none，即無動畫效果。
2、animation-duration：
執行週期，添加動畫效果時該屬性也是必要的，默認爲0，即無動畫效果。
3、animation-delay：
延遲時間，添加動畫效果時該屬性爲動畫播放前的延遲時間，它的值可以是秒、毫秒，默認爲0，即不進行延遲，立即開始動畫。
4、animation-timing-function：
執行速度，它的值是貝塞爾曲線，默認值是ease。
linear代表勻速移動，ease（默認，先慢開始再加快最後變慢結束）、ease-in（先慢開始然後加快結束）、ease-out（先快開始然後變慢結束）、ease-in-out（先慢後快後慢，和ease類似）。
5、animation-iteration-count：
循環次數，直接寫數字可以自定義播放動畫的次數，或者使用infinite來設置無限循環播放。
6、animation-fill-mode：
定義樣式，即動畫結束以後或者未開始前的樣式，默認爲none，就不會額外添加樣式，動畫執行後恢復到原本的樣子。
forwards表示動畫結束後樣式定格，即取動畫在100%進度時的樣式，不會還原到動畫執行前的樣式。例如在鼠標懸浮到某個元素上需要放大顯示時，可以設置成動畫結束後保留樣式，否則就會在放大結束後回退到放大前的大小。
backwards表示動畫開始前預置樣式，即取動畫在0%進度時的樣式（通常搭配animation-delay的延遲效果使用，在延遲期間顯示預置的樣式）。
both表示forwards和backwards都生效。
7、animation-direction：
輪流反向播放，默認值爲normal，正常播放。
reverse表示動畫反向播放。alternate表示動畫奇數次正向播放，偶數次反向播放。alternate-reverse表示動畫在奇數次反向播放，偶數次正向播放。
三、瀏覽器兼容性
IE還是一如既往的難以兼容，老版本肯定是不行了，animation-fill-mode這樣的屬性到IE10才兼容。
其他瀏覽器如Firefox、Opera等添加動畫效果時可以通過animation和@keyframes來搭配使用，Safari 、 Chrome需要使用-webkit-animation和@-webkit-keyframes