CSS3动画详解（图文教程）
本文最初發(fā)表于博客園，并在GitHub上持續(xù)更新前端的系列文章。歡迎在GitHub上關注我，一起入門和進階前端。
以下是正文。
前言
本文主要內(nèi)容：
過渡：transition
2D 轉(zhuǎn)換 transform
3D 轉(zhuǎn)換 transform
動畫：animation
過渡：transition
transition的中文含義是過渡。過渡是CSS3中具有顛覆性的一個特征，可以實現(xiàn)元素不同狀態(tài)間的平滑過渡（補間動畫），經(jīng)常用來制作動畫效果。
補間動畫：自動完成從起始狀態(tài)到終止狀態(tài)的的過渡。不用管中間的狀態(tài)。
幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片。
參考鏈接：補間動畫基礎
transition 包括以下屬性：
transition-property: all; 如果希望所有的屬性都發(fā)生過渡，就使用all。
transition-duration: 1s; 過渡的持續(xù)時間。
- transition-timing-function: linear; 運動曲線。屬性值可以是：
- linear 線性
- ease 減速
- ease-in 加速
- ease-out 減速
- ease-in-out 先加速后減速
transition-delay: 1s; 過渡延遲。多長時間后再執(zhí)行這個過渡動畫。
上面的四個屬性也可以寫成綜合屬性：
transition: 讓哪些屬性進行過度 過渡的持續(xù)時間 運動曲線 延遲時間;transition: all 3s linear 0s;其中，transition-property這個屬性是尤其需要注意的，不同的屬性值有不同的現(xiàn)象。我們來示范一下。
如果設置 transition-property: width，意思是只讓盒子的寬度在變化時進行過渡。效果如下：
如果設置 transition-property: all，意思是讓盒子的所有屬性（包括寬度、背景色等）在變化時都進行過渡。效果如下：
案例：小米商品詳情
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS 過渡</title><style>body {margin: 0;padding: 0;background-color: #eeeeee;}.content {width: 800px;height: 320px;padding-left: 20px;margin: 80px auto;}.item {width: 230px;height: 300px;text-align: center;margin-right: 20px;background-color: #FFF;float: left;position: relative;top: 0;overflow: hidden; /* 讓溢出的內(nèi)容隱藏起來。意思是讓下方的橙色方形先躲起來 */transition: all .5s; /* 從最初到鼠標懸停時的過渡 */}.item img {margin-top: 30px;}.item .desc {position: absolute;left: 0;bottom: -80px;width: 100%;height: 80px;background-color: #ff6700;transition: all .5s;}/* 鼠標懸停時，讓 item 整體往上移動5px，且加一點陰影 */.item:hover {top: -5px;box-shadow: 0 0 15px #AAA;}/* 鼠標懸停時，讓下方的橙色方形現(xiàn)身 */.item:hover .desc {bottom: 0;}</style> </head> <body> <div class="content"><div class="item"><img src="./images/1.png" alt=""></div><div class="item"><img src="./images/2.png" alt=""><span class="desc"></span></div><div class="item"><img src="./images/3.jpg" alt=""><span class="desc"></span></div> </div> </body> </html>效果如下：
動畫效果錄制的比較差，但真實體驗還是可以的。
工程文件：
- 2018-02-08-小米商品詳情過渡
2D 轉(zhuǎn)換
轉(zhuǎn)換是 CSS3 中具有顛覆性的一個特征，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式。
轉(zhuǎn)換再配合過渡和動畫，可以取代大量早期只能靠 Flash 才可以實現(xiàn)的效果。
在 CSS3 當中，通過 transform 轉(zhuǎn)換來實現(xiàn) 2D 轉(zhuǎn)換或者 3D 轉(zhuǎn)換。
- 2D轉(zhuǎn)換包括：縮放、移動、旋轉(zhuǎn)。
我們依次來講解。
1、縮放：scale
格式：
transform: scale(x, y);transform: scale(2, 0.5);參數(shù)解釋： x：表示水平方向的縮放倍數(shù)。y：表示垂直方向的縮放倍數(shù)。如果只寫一個值就是等比例縮放。
取值：大于1表示放大，小于1表示縮小。不能為百分比。
格式舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 1000px;margin: 100px auto;}.box div {width: 300px;height: 150px;background-color: pink;float: left;margin-right: 15px;color: white;text-align: center;font: 400 30px/150px “宋體”;}.box .box2 {background-color: green;transition: all 1s;}.box .box2:hover {/*width: 500px;*//*height: 400px;*/background-color: yellowgreen;/* transform: css3中用于做變換的屬性scale(x,y)：縮放 */transform: scale(2, 0.5);}</style> </head> <body> <div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div> </div></body> </html>效果：
上圖可以看到，給 box1 設置 2D 轉(zhuǎn)換，并不會把兄弟元素擠走。
2、位移：translate
格式：
transform: translate(水平位移, 垂直位移);transform: translate(-50%, -50%);參數(shù)解釋：
參數(shù)為百分比，相對于自身移動。
正值：向右和向下。 負值：向左和向上。如果只寫一個值，則表示水平移動。
格式舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 1000px;margin: 100px auto;}.box > div {width: 300px;height: 150px;border: 1px solid #000;background-color: red;float: left;margin-right: 30px;}div:nth-child(2) {background-color: pink;transition: all 1s;}/* translate:(水平位移，垂直位移)*/div:nth-child(2):hover {transform: translate(-50%, -50%);}</style></head> <body> <div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div> </div></body> </html>效果：
上圖中，因為我在操作的時候，鼠標懸停后，立即進行了略微的移動，所以產(chǎn)生了兩次動畫。正確的效果應該是下面這樣的：
應用：讓絕對定位中的盒子在父親里居中
我們知道，如果想讓一個標準流中的盒子在父親里居中（水平方向看），可以將其設置margin: 0 auto屬性。
可如果盒子是絕對定位的，此時已經(jīng)脫標了，如果還想讓其居中（位于父親的正中間），可以這樣做：
div {width: 600px;height: 60px;position: absolute; 絕對定位的盒子left: 50%; 首先，讓左邊線居中top: 0;margin-left: -300px; 然后，向左移動寬度（600px）的一半}如上方代碼所示，我們先讓這個寬度為600px的盒子，左邊線居中，然后向左移動寬度（600px）的一半，就達到效果了。
現(xiàn)在，我們還可以利用偏移 translate 來做，這也是比較推薦的寫法：
div {width: 600px;height: 60px;background-color: red;position: absolute; 絕對定位的盒子left: 50%; 首先，讓左邊線居中top: 0;transform: translate(-50%); 然后，利用translate，往左走自己寬度的一半【推薦寫法】}3、旋轉(zhuǎn)：rotate
格式：
transform: rotate(角度);transform: rotate(45deg);參數(shù)解釋：正值 順時針；負值：逆時針。
舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background-color: red;margin: 50px auto;color: #fff;font-size: 50px;transition: all 2s; /* 過渡：讓盒子在進行 transform 轉(zhuǎn)換的時候，有個過渡期 */}/* rotate（角度）旋轉(zhuǎn) */.box:hover {transform: rotate(-405deg); /* 鼠標懸停時，讓盒子進行旋轉(zhuǎn) */}</style> </head> <body> <div class="box">1</div></div> </body> </html>效果：
注意，上方代碼中，我們給盒子設置了 transform 中的 rotate 旋轉(zhuǎn)，但同時還要給盒子設置 transition 過渡。如果沒有這行過渡的代碼，旋轉(zhuǎn)會直接一步到位，效果如下：（不是我們期望的效果）
案例1：小火箭
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>html,body{height:100%;}body{background-color: #DE8910;}.rocket{position: absolute;left:100px;top:600px;height: 120px;transform:translate(-200px ,200px) rotate(45deg);transition:all 1s ease-in;}body:hover .rocket{transform:translate(500px,-500px) rotate(45deg);}</style> </head> <body><img class="rocket" src="images/rocket.png" alt=""/> </body> </html>上方代碼中，我們將 transform 的兩個小屬性合并起來寫了。
小火箭圖片的url：http://img.smyhvae.com/20180208-rocket.png
案例2：撲克牌
rotate 旋轉(zhuǎn)時，默認是以盒子的正中心為坐標原點的。如果想改變旋轉(zhuǎn)的坐標原點，可以用transform-origin屬性。格式如下：
transform-origin: 水平坐標 垂直坐標;transform-origin: 50px 50px;transform-origin: center bottom; //旋轉(zhuǎn)時，以盒子底部的中心為坐標原點我們來看一下 rotate 結合 transform-origin 的用法舉例。
代碼如下：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body {/*background-color: #eee;*/}.box {width: 300px;height: 440px;margin: 100px auto;position: relative;}img {width: 100%;transition: all 1.5s;position: absolute; /* 既然撲克牌是疊在一起的，那就都用絕對定位 */left: 0;top: 0;transform-origin: center bottom; /*旋轉(zhuǎn)時，以盒子底部的中心為坐標原點*/box-shadow: 0 0 3px 0 #666;}.box:hover img:nth-child(6) {transform: rotate(-10deg);}.box:hover img:nth-child(5) {transform: rotate(-20deg);}.box:hover img:nth-child(4) {transform: rotate(-30deg);}.box:hover img:nth-child(3) {transform: rotate(-40deg);}.box:hover img:nth-child(2) {transform: rotate(-50deg);}.box:hover img:nth-child(1) {transform: rotate(-60deg);}.box:hover img:nth-child(8) {transform: rotate(10deg);}.box:hover img:nth-child(9) {transform: rotate(20deg);}.box:hover img:nth-child(10) {transform: rotate(30deg);}.box:hover img:nth-child(11) {transform: rotate(40deg);}.box:hover img:nth-child(12) {transform: rotate(50deg);}.box:hover img:nth-child(13) {transform: rotate(60deg);}</style> </head> <body> <div class="box"><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/> </div> </body> </html>效果如下：
4、傾斜
暫略。
3D 轉(zhuǎn)換
1、旋轉(zhuǎn)：rotateX、rotateY、rotateZ
3D坐標系（左手坐標系）
如上圖所示，伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分別代表X、Y、Z軸的正方向，這樣我們就建立了一個左手坐標系。
瀏覽器的這個平面，是X軸、Y軸；垂直于瀏覽器的平面，是Z軸。
旋轉(zhuǎn)的方向：（左手法則）
左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸的正方向，正向就是其余手指卷曲的方向。
從上面這句話，我們也能看出：所有的3d旋轉(zhuǎn)，對著正方向去看，都是順時針旋轉(zhuǎn)。
格式：
transform: rotateX(360deg); //繞 X 軸旋轉(zhuǎn)360度transform: rotateY(360deg); //繞 Y 軸旋轉(zhuǎn)360度transform: rotateZ(360deg); //繞 Z 軸旋轉(zhuǎn)360度格式舉例：
（1）rotateX 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.rotateX {width: 300px;height: 226px;margin: 200px auto;/* 透視 :加給變換的父盒子*//* 設置的是用戶的眼睛距離 平面的距離*//* 透視效果只是視覺上的呈現(xiàn)，并不是正真的3d*/perspective: 110px;}img {/* 過渡*/transition: transform 2s;}/* 所有的3d旋轉(zhuǎn)，對著正方向去看，都是順時針旋轉(zhuǎn)*/.rotateX:hover img {transform: rotateX(360deg);}</style> </head> <body> <div class="rotateX"><img src="images/x.jpg" alt=""/> </div> </body> </html>效果：
上方代碼中，我們最好加個透視的屬性，方能看到3D的效果；沒有這個屬性的話，圖片旋轉(zhuǎn)的時候，像是壓癟了一樣。
而且，透視的是要加給圖片的父元素 div，方能生效。我們在后面會講解透視屬性。
（2）rotateY 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.rotateY {width: 237px;height: 300px;margin: 100px auto;/* 透視 */perspective: 150px;}img {transition: all 2s; /* 過渡 */}.rotateY:hover img {transform: rotateY(360deg);}</style> </head> <body> <div class="rotateY"><img src="images/y.jpg" alt=""/> </div> </body> </html>效果：
（3）rotateZ 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.rotateZ {width: 330px;height: 227px;margin: 100px auto;/* 透視*/perspective: 200px;}img {transition: all 1s;}.rotateZ:hover img {transform: rotateZ(360deg);}</style> </head> <body> <div class="rotateZ"><img src="images/z.jpg" alt=""/> </div> </body> </html>效果：
案例：百度錢包
現(xiàn)在有下面這張圖片素材：
要求做成下面這種效果：
上面這張圖片素材其實用的是精靈圖。實現(xiàn)的代碼如下：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body {background-color: cornflowerblue;}.box {width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 50px auto;position: relative;}.box > div {width: 100%;height: 100%;position: absolute;/*border: 1px solid #000;*/border-radius: 50%;transition: all 2s;backface-visibility: hidden;}.box1 {background: url(images/bg.png) left 0 no-repeat; /*默認顯示圖片的左半邊*/}.box2 {background: url(images/bg.png) right 0 no-repeat;transform: rotateY(180deg); /*讓圖片的右半邊默認時，旋轉(zhuǎn)180度，就可以暫時隱藏起來*/}.box:hover .box1 {transform: rotateY(180deg); /*讓圖片的左半邊轉(zhuǎn)消失*/}.box:hover .box2 {transform: rotateY(0deg); /*讓圖片的左半邊轉(zhuǎn)出現(xiàn)*/}</style> </head> <body> <div class="box"><div class="box1"></div><div class="box2"></div> </div> </body> </html>2、移動：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿著 X 軸移動transform: translateY(360px); //沿著 Y 軸移動transform: translateZ(360px); //沿著 Z 軸移動格式舉例：
（1）translateX 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateX(100px);}</style> </head> <body> <div class="box"></div> </body> </html>效果：
（2）translateY 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateY(100px);}</style> </head> <body> <div class="box"></div> </body> </html>效果：
（3）translateZ 舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body {/* 給box的父元素加透視效果*/perspective: 1000px;}.box {width: 250px;height: 250px;background: green;transition: all 1s;margin: 200px auto}.box:hover {/* translateZ必須配合透視來使用*/transform: translateZ(400px);}</style> </head> <body> <div class="box"></div> </body> </html>效果：
上方代碼中，如果不加透視屬性，是看不到translateZ的效果的。
3、透視：perspective
電腦顯示屏是一個 2D 平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的。
透視可以將一個2D平面，在轉(zhuǎn)換的過程當中，呈現(xiàn)3D效果。但僅僅只是視覺呈現(xiàn)出3d 效果，并不是正真的3d。
格式有兩種寫法：
作為一個屬性，設置給父元素，作用于所有3D轉(zhuǎn)換的子元素
作為 transform 屬性的一個值，做用于元素自身。
4、3D呈現(xiàn)（transform-style）
3D元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設置transform-style: preserve-3d來使其變成一個真正的3D圖形。屬性值可以如下：
transform-style: preserve-3d; //讓 子盒子 位于三維空間里transform-style: flat; //讓子盒子位于此元素所在的平面內(nèi)（子盒子被扁平化）案例：立方體
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 250px;height: 250px;border: 1px dashed red;margin: 100px auto;position: relative;border-radius: 50%;/* 讓子盒子保持3d效果*/transform-style: preserve-3d;/*transform:rotateX(30deg) rotateY(-30deg);*/animation: gun 8s linear infinite;}.box > div {width: 100%;height: 100%;position: absolute;text-align: center;line-height: 250px;font-size: 60px;color: #daa520;}.left {background-color: rgba(255, 0, 0, 0.3);/* 變換中心*/transform-origin: left;/* 變換*/transform: rotateY(90deg) translateX(-125px);}.right {background: rgba(0, 0, 255, 0.3);transform-origin: right;/* 變換*/transform: rotateY(90deg) translateX(125px);}.forward {background: rgba(255, 255, 0, 0.3);transform: translateZ(125px);}.back {background: rgba(0, 255, 255, 0.3);transform: translateZ(-125px);}.up {background: rgba(255, 0, 255, 0.3);transform: rotateX(90deg) translateZ(125px);}.down {background: rgba(99, 66, 33, 0.3);transform: rotateX(-90deg) translateZ(125px);}@keyframes gun {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}</style> </head> <body> <div class="box"><div class="up">上</div><div class="down">下</div><div class="left">左</div><div class="right">右</div><div class="forward">前</div><div class="back">后</div> </div> </body> </html>動畫
動畫是CSS3中具有顛覆性的特征，可通過設置多個節(jié)點 來精確控制一個或一組動畫，常用來實現(xiàn)復雜的動畫效果。
1、定義動畫的步驟
（1）通過@keyframes定義動畫；
（2）將這段動畫通過百分比，分割成多個節(jié)點；然后各節(jié)點中分別定義各屬性；
（3）在指定元素里，通過 animation 屬性調(diào)用動畫。
之前,我們在 js 中定義一個函數(shù)的時候，是先定義，再調(diào)用：
js 定義函數(shù)：function fun(){ 函數(shù)體 }調(diào)用：fun();同樣，我們在 CSS3 中定義動畫的時候，也是先定義，再調(diào)用：
定義動畫：@keyframes 動畫名{from{ 初始狀態(tài) }to{ 結束狀態(tài) }}調(diào)用：animation: 動畫名稱 持續(xù)時間；其中，animation屬性的格式如下：
animation: 定義的動畫名稱 持續(xù)時間 執(zhí)行次數(shù) 是否反向 運動曲線 延遲執(zhí)行。(infinite 表示無限次)animation: move1 1s alternate linear 3;animation: move2 4s;定義動畫的格式舉例：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 100px;height: 100px;margin: 100px;background-color: red;/* 調(diào)用動畫*//* animation: 動畫名稱 持續(xù)時間 執(zhí)行次數(shù) 是否反向 運動曲線 延遲執(zhí)行。infinite 表示無限次*//*animation: move 1s alternate linear 3;*/animation: move2 4s;}/* 方式一：定義一組動畫*/@keyframes move1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(500px) rotate(555deg);}}/* 方式二：定義多組動畫*/@keyframes move2 {0% {transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}25% {transform: translateX(500px) translateY(0px);}/*動畫執(zhí)行到 50% 的時候，背景色變成綠色，形狀變成圓形*/50% {/* 雖然兩個方向都有translate，但其實只是Y軸上移動了200px。因為X軸的500px是相對最開始的原點來說的。可以理解成此時的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color: green;border-radius: 50%;}75% {transform: translateX(0px) translateY(200px);}/*動畫執(zhí)行到 100% 的時候，背景色還原為紅色，形狀還原為正方形*/100% {/*坐標歸零，表示回到原點。*/transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}}</style> </head> <body> <div class="box"></div> </body> </html>注意好好看代碼中的注釋。
效果如下：
2、動畫屬性
我們剛剛在調(diào)用動畫時，animation屬性的格式如下：
animation屬性的格式如下：
animation: 定義的動畫名稱 持續(xù)時間 執(zhí)行次數(shù) 是否反向 運動曲線 延遲執(zhí)行。(infinite 表示無限次)animation: move1 1s alternate linear 3;animation: move2 4s;可以看出，這里的 animation 是綜合屬性，接下來，我們把這個綜合屬性拆分看看。
（1）動畫名稱：
animation-name: move;（2）執(zhí)行一次動畫的持續(xù)時間：
animation-duration: 4s;備注：上面兩個屬性，是必選項，且順序固定。
（3）動畫的執(zhí)行次數(shù)：
animation-iteration-count: 1; //iteration的含義表示迭代屬性值infinite表示無數(shù)次。
（3）動畫的方向：
animation-direction: alternate;屬性值：normal 正常，alternate 反向。
（4）動畫延遲執(zhí)行：
animation-delay: 1s;（5）設置動畫結束時，盒子的狀態(tài)：
animation-fill-mode: forwards;屬性值： forwards：保持動畫結束后的狀態(tài)（默認）， backwards：動畫結束后回到最初的狀態(tài)。
（6）運動曲線：
animation-timing-function: ease-in;屬性值可以是：linear ease-in-out steps()等。
注意，如果把屬性值寫成steps()，則表示動畫不是連續(xù)執(zhí)行，而是間斷地分成幾步執(zhí)行。我們接下來專門講一下屬性值 steps()。
steps()的效果
我們還是拿上面的例子來舉例，如果在調(diào)用動畫時，我們寫成：
animation: move2 4s steps(2);效果如下：
有了屬性值 steps()，我們就可以作出很多不連續(xù)地動畫效果。比如時鐘；再比如，通過多張靜態(tài)的魚，作出一張游動的魚。
step()舉例：時鐘的簡易模型
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>div {width: 3px;height: 200px;background-color: #000;margin: 100px auto;transform-origin: center bottom; /* 旋轉(zhuǎn)的中心點是底部 */animation: myClock 60s steps(60) infinite;}@keyframes myClock {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style> </head> <body> <div></div> </body> </html>上方代碼，我們通過一個黑色的長條div，旋轉(zhuǎn)360度，耗時60s，分成60步完成。即可實現(xiàn)。
效果如下：
動畫舉例：擺動的魚
現(xiàn)在，我們要做下面這種效果：
PS：圖片的url是http://img.smyhvae.com/20180209_1245.gif，圖片較大，如無法觀看，可在瀏覽器中單獨打開。
為了作出上面這種效果，要分成兩步。
（1）第一步：讓魚在原地擺動
魚在原地擺動并不是一張 gif動圖，她其實是由很多張靜態(tài)圖間隔地播放，一秒鐘播放完畢，就可以了：
上面這張大圖的尺寸是：寬 509 px、高 2160 px。
我們可以理解成，每一幀的尺寸是：寬 509 px、高 270 px。270 * 8 = 2160。讓上面這張大圖，在一秒內(nèi)從 0px 的位置往上移動2160px，分成8步來移動。就可以實現(xiàn)了。
代碼是：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.shark {width: 509px;height: 270px; /*盒子的寬高是一幀的寬高*/border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 讓圖片一開始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之內(nèi)，從頂部移動到底部，分八幀， */}@keyframes sharkRun {0% {}/* 270 * 8 = 2160 */100% {background-position: left -2160px; /* 動畫結束時，讓圖片位于最底部 */}}</style> </head> <body> <div class="sharkBox"><div class="shark"></div> </div></div> </body> </html>效果如下：
我們不妨把上面的動畫的持續(xù)時間從1s改成 8s，就可以看到動畫的慢鏡頭：
這下，你應該恍然大悟了。
（2）第二步：讓魚所在的盒子向前移動。
實現(xiàn)的原理也很簡單，我們在上一步中已經(jīng)讓shark這個盒子實現(xiàn)了原地搖擺，現(xiàn)在，讓 shark 所在的父盒子 sharkBox向前移動，即可。完整版代碼是：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>.shark {width: 509px;height: 270px; /* 盒子的寬高是一幀的寬高 */border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 讓圖片一開始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之內(nèi)，從頂部移動到底部，分八幀 */}/* 魚所在的父盒子 */.sharkBox {width: 509px;height: 270px;animation: sharkBoxRun 20s linear infinite;}@keyframes sharkRun {0% {}/* 270 * 8 = 2160 */100% {background-position: left -2160px; /* 動畫結束時，讓圖片位于最底部 */}}@keyframes sharkBoxRun {0% {transform: translateX(-600px);}100% {transform: translateX(3000px);}}</style> </head> <body> <div class="sharkBox"><div class="shark"></div> </div></div> </body> </html>大功告成。
工程文件如下：
- 2018-02-09-fishes.rar
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發(fā)現(xiàn)另一個全新的世界，而這將是一場美麗的意外：
總結
以上是生活随笔為你收集整理的CSS3动画详解（图文教程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java_异常_04_ OutOfMem
- 下一篇： webpack4.0各个击破（2）——