css製作逐幀動畫，好看又好玩
網頁動畫影象、Flash 動畫和 JavaScript 實現的效果圖片，我們用最基礎的CSS也能實現。製作一個簡單的gif動畫圖，上圖就是效果圖。
用CSS3製作動畫圖，你需要了解兩個css屬性。
其一是 @keyframes
因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器相容的時候需要在keyframes上加字首，-webkit-, -ms- 或 -moz- 。
keyframes中有兩個屬性，from和to，from裡面的內容定義動畫開始的狀態，to記錄動畫結束的狀態。@keyframes後面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標籤元素使用這個動畫時候，就需要用到這個名字。
@keyframes gifname
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
from {background: red;}
to {background: yellow;}
}from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內容定義得更加豐富了。
@keyframes gifname
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} 比如我在一個div元素上用到這個動畫
div
{
animation: gifname 5s;
-webkit-animation: gifname 5s; /* Safari 與 Chrome */
}其二是 animation
剛剛我們在div元素中看到的animation就是我們要認識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句程式碼：
animation:gifname 2s step-start 1s infinite alternate;這一句其實可以寫成
animation-name: gifname;
animation-duration: 2s;
animation-timing-function: step-start;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate; animation-name：動畫名稱
這裡是 引入 @keyframes 動畫的名稱。
animation-duration：動畫的持續時間
單位可以是秒(s)，也可以是毫秒(ms)
animation-timing-function：動畫的過度型別
屬性值 :預設是 "ease"
linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(n,n,n,n):在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。
step-start:馬上跳到動畫每一結束幀的狀態
animation-delay：動畫延遲時間
預設是 0。
animation-iteration-count：動畫迴圈次數
預設是 1。屬性值infinite 代表無數次。
animation-direction：動畫是否在下一週期逆向地播放
屬性值
normal：正常方向
reverse：反方向執行
alternate：動畫先正常執行再反方向執行，並持續交替執行
alternate-reverse：動畫先反執行再正方向執行，並持續交替執行
另外還有兩項屬性：
animation-fill-mode:設定動畫播放後的效果
取值:
none:初始樣式,不改變預設行為.(預設行為)
forwards:動畫播放結束後保持最後一個狀態;
backwards:結束後保持第一個狀態;
animation-play-state :檢索或設定物件動畫的狀態
屬性值
animation-play-state:running | paused;
running:運動
paused: 暫停
animation-play-state:paused; 當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行
到此為止，屬性我們都學習完了，開始實踐部分：
首先準備好我們需要的圖片，這裡我使用了九張圖片。
我把九張圖片放在九個<li></li>標籤裡。所有li標籤用ul標籤包含起來。然後把ul放在一個div標籤裡，div設定成一張圖片的大小，然後通過逐幀移動ul元素實現動畫。
最後的處理，把超出div元素的部分隱藏即可。然後就得到了文章開始時候的圖片了。
最關鍵的，上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css動畫</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
margin-right: 0;
}
#div{
width:100px;
height:100px;
border: 1px solid #fff;
overflow: hidden;
margin: 100px 0 0 100px;
}
#box{
width:900px;
height:100px;
border: 1px solid #fff;
overflow:visible;
position:relative;
animation:myfirst 2s step-start 1s infinite ;
/* Firefox: */
-moz-animation:myfirst 2s step-start 1s infinite ;
/* Safari and Chrome: */
-webkit-animation:myfirst 2s step-start 1s infinite ;
/* Opera: */
-o-animation:myfirst 2s step-start 1s infinite ;
}
#box li{
float: left;
width:98px;
height:100px;
border:1px solid #fff;
}
li img{
width:100%;
height:100%;
}
@keyframes myfirst
{
0% { left:0px; top:0;}
11.1% { left:-100px; top:0;}
22.2% { left:-200px; top:0;}
33.3% { left:-300px; top:0;}
44.4% { left:-400px; top:0;}
55.5% { left:-500px; top:0;}
66.6% { left:-600px; top:0;}
77.7% { left:-700px; top:0;}
88.8% { left:-800px; top:0;}
100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { left:0px; top:0;}
11.1% { left:-100px; top:0;}
22.2% { left:-200px; top:0;}
33.3% { left:-300px; top:0;}
44.4% { left:-400px; top:0;}
55.5% { left:-500px; top:0;}
66.6% { left:-600px; top:0;}
77.7% { left:-700px; top:0;}
88.8% { left:-800px; top:0;}
100% {left:0px; top:0;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { left:0px; top:0;}
11.1% { left:-100px; top:0;}
22.2% { left:-200px; top:0;}
33.3% { left:-300px; top:0;}
44.4% { left:-400px; top:0;}
55.5% { left:-500px; top:0;}
66.6% { left:-600px; top:0;}
77.7% { left:-700px; top:0;}
88.8% { left:-800px; top:0;}
100% {left:0px; top:0;}
}
@-o-keyframes myfirst /* Opera */
{
0% { left: