一、animation屬性設置

要啟用css3動畫，就要先了解 animation 屬性， animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

animation-name　　　　　　　規定 @keyframes 動畫的名稱。
animation-duration　　　　　規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function　　規定動畫的速度曲線。默認是 “ease”。
animation-delay　　　　　　　規定在動畫開始之前的延遲。
animation-iteration-count　　規定動畫應該播放的次數。
animation-direction　　　　　規定是否應該輪流反向播放動畫。
animation-play-state　　　　　規定動畫是否正在運行或暫停。默認是 “running”。
animation-fill-mode　　　　　規定動畫在播放之前或之后，其動畫效果是否可見。

逐幀動畫最關鍵的是設置：animation-timing-function 屬性為：steps(n,[ start | end ])。

這個n是一個自然數，意思就是把一個動畫平均分成n等分，直到平均地走完這個動畫，這個要跟linear區別開來，因為linear是把動畫作為一個整體，中間沒有斷點，而steps是把動畫分段平均執行開來。step-start等同于steps(1,start)，動畫分成1步，動畫執行時為開始左側端點的部分為開始；step-end等同于steps(1,end)：動畫分成一步，動畫執行時以結尾端點為開始，默認值為end。對此，w3c圖解如下：

具體實例解釋：假設對它應用 steps(3, start) 和 steps(3, end) ，做出階躍函數曲線如下：

1、steps(3, start)

steps() 第一個參數將動畫分割成三段。當指定躍點為 start 時，動畫在每個計時周期的起點發生階躍（即圖中 空心圓 → 實心圓 ）。 由于第一次階躍發生在第一個計時周期的起點處（0s），所以我們看到的第一步動畫（初態）就為 1/3 的狀態，因此在視覺上動畫的過程為 1/3 → 2/3 → 1 。

2、steps(3， end)

當指定躍點為 end，動畫則在每個計時周期的終點發生階躍（即圖中 空心圓 → 實心圓 ）。 由于第一次階躍發生在第一個計時周期結束時（1s），所以我們看到的初態為 0% 的狀態；而在整個動畫周期完成處（3s），雖然發生階躍跳到了 100% 的狀態，但同時動畫結束，所以 100% 的狀態不可視。因此在視覺上動畫的過程為 0 → 1/3 → 2/3

二、精靈圖的設置

了解了逐幀動畫的關鍵設置，我們再來繼續學習精靈圖的部分。

用這張精靈圖最終實現的效果如下圖：

1、首先定義元素的基本css屬性

.boxA {width: 300px; /*寬高尺寸任意增減*/height: 100px;background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;background-size: 400% 100%; /*這項是關鍵，用來撐開拼湊起來的序列幀，一行4幀圖就是400%*/-webkit-animation: bird-slow .5s steps(3) infinite; /*發生了3次位移steps就是3*/animation: bird-slow .5s steps(3) infinite; }

2、然后定義動畫關鍵幀屬性

@keyframes bird-slow {0% {background-position: 0% 0%;}100% {background-position: 99% 0%; /*整張圖是100%，3次位移每一次是33%，第三次就是99%*/} } @-webkit-keyframes bird-slow {0% {background-position: 0% 0%;}100% {background-position: 99% 0%;} }

最后給html元素套用這個class即可看到效果了

更詳細教程可以參考：http://www.w3cplus.com/css3/CSS3-animation.html

總結

以上是生活随笔為你收集整理的[css3动画教程]：逐帧自适应精灵图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。