義和用法

一些 CSS 屬性是可以有動(dòng)畫效果的，這意味著它們可以用于動(dòng)畫和過(guò)渡。

動(dòng)畫屬性可以逐漸地從一個(gè)值變化到另一個(gè)值，比如尺寸大小、數(shù)量、百分比和顏色。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

緊跟在數(shù)字后面的 -webkit-, -moz-, 或 -o- 指定了第一個(gè)支持該屬性的瀏覽器版本前綴。

實(shí)例

背景顏色逐漸地從紅色變化到藍(lán)色：

@keyframes mymove

{

from {background-color:red;}

to {left:blue;}

}

/*Safari 和 Chrome:*/

@-webkit-keyframes mymove

{

from {background-color:red;}

to {background-color:blue;}

}

動(dòng)畫屬性

CSS 中的動(dòng)畫屬性：

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

文主要內(nèi)容

• 過(guò)渡：transition
• 2D 轉(zhuǎn)換 transform
• 3D 轉(zhuǎn)換 transform
• 動(dòng)畫：animation

過(guò)渡：transition

transition的中文含義是過(guò)渡。過(guò)渡是CSS3中具有顛覆性的一個(gè)特征，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過(guò)渡（補(bǔ)間動(dòng)畫），經(jīng)常用來(lái)制作動(dòng)畫效果。

• 補(bǔ)間動(dòng)畫：自動(dòng)完成從起始狀態(tài)到終止?fàn)顟B(tài)的的過(guò)渡。不用管中間的狀態(tài)。
• 幀動(dòng)畫：通過(guò)一幀一幀的畫面按照固定順序和速度播放。如電影膠片。

transition 包括以下屬性：

• transition-property: all; 如果希望所有的屬性都發(fā)生過(guò)渡，就使用all。
• transition-duration: 1s; 過(guò)渡的持續(xù)時(shí)間。
• transition-timing-function: linear; 運(yùn)動(dòng)曲線。屬性值可以是：
• linear 線性
• ease 減速
• ease-in 加速
• ease-out 減速
• ease-in-out 先加速后減速
• transition-delay: 1s; 過(guò)渡延遲。多長(zhǎng)時(shí)間后再執(zhí)行這個(gè)過(guò)渡動(dòng)畫。

上面的四個(gè)屬性也可以寫成綜合屬性：

 transition: 讓哪些屬性進(jìn)行過(guò)度 過(guò)渡的持續(xù)時(shí)間 運(yùn)動(dòng)曲線 延遲時(shí)間;
 transition: all 3s linear 0s;

其中，transition-property這個(gè)屬性是尤其需要注意的，不同的屬性值有不同的現(xiàn)象。我們來(lái)示范一下。

如果設(shè)置 transition-property: width，意思是只讓盒子的寬度在變化時(shí)進(jìn)行過(guò)渡。效果如下：

如果設(shè)置 transition-property: all，意思是讓盒子的所有屬性（包括寬度、背景色等）在變化時(shí)都進(jìn)行過(guò)渡。效果如下

案例：小米商品詳情

效果如下：

2D 轉(zhuǎn)換

轉(zhuǎn)換是 CSS3 中具有顛覆性的一個(gè)特征，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式。

轉(zhuǎn)換再配合過(guò)渡和動(dòng)畫，可以取代大量早期只能靠 Flash 才可以實(shí)現(xiàn)的效果。

在 CSS3 當(dāng)中，通過(guò) transform 轉(zhuǎn)換來(lái)實(shí)現(xiàn) 2D 轉(zhuǎn)換或者 3D 轉(zhuǎn)換。

• 2D轉(zhuǎn)換包括：縮放、移動(dòng)、旋轉(zhuǎn)。

1、縮放：scale

格式：

 transform: scale(x, y);
 transform: scale(2, 0.5);

參數(shù)解釋： x：表示水平方向的縮放倍數(shù)。y：表示垂直方向的縮放倍數(shù)。如果只寫一個(gè)值就是等比例縮放。

取值：大于1表示放大，小于1表示縮小。不能為百分比。

格式舉例：

效果：

上圖可以看到，給 box1 設(shè)置 2D 轉(zhuǎn)換，并不會(huì)把兄弟元素?cái)D走。

2、位移：translate

格式：

 transform: translate(水平位移, 垂直位移);
 transform: translate(-50%, -50%);

參數(shù)解釋：

• 參數(shù)為百分比，相對(duì)于自身移動(dòng)。
• 正值：向右和向下。 負(fù)值：向左和向上。如果只寫一個(gè)值，則表示水平移動(dòng)。

格式舉例：

效果：

上圖中，因?yàn)槲以诓僮鞯臅r(shí)候，鼠標(biāo)懸停后，立即進(jìn)行了略微的移動(dòng)，所以產(chǎn)生了兩次動(dòng)畫。正確的效果應(yīng)該是下面這樣的

應(yīng)用：讓絕對(duì)定位中的盒子在父親里居中

我們知道，如果想讓一個(gè)標(biāo)準(zhǔn)流中的盒子在父親里居中（水平方向看），可以將其設(shè)置margin: 0 auto屬性。

可如果盒子是絕對(duì)定位的，此時(shí)已經(jīng)脫標(biāo)了，如果還想讓其居中（位于父親的正中間），可以這樣做：

 div {
 width: 600px;
 height: 60px;
 position: absolute; 絕對(duì)定位的盒子
 left: 50%; 首先，讓左邊線居中
 top: 0;
 margin-left: -300px; 然后，向左移動(dòng)寬度（600px）的一半
 }

如上方代碼所示，我們先讓這個(gè)寬度為600px的盒子，左邊線居中，然后向左移動(dòng)寬度（600px）的一半，就達(dá)到效果了。

現(xiàn)在，我們還可以利用偏移 translate 來(lái)做，這也是比較推薦的寫法：

div {
 width: 600px;
 height: 60px;
 background-color: red;
 position: absolute; 絕對(duì)定位的盒子
 left: 50%; 首先，讓左邊線居中
 top: 0;
 transform: translate(-50%); 然后，利用translate，往左走自己寬度的一半【推薦寫法】
 }

3、旋轉(zhuǎn)：rotate

格式：

 transform: rotate(角度);
 transform: rotate(45deg);

參數(shù)解釋：正值 順時(shí)針；負(fù)值：逆時(shí)針。

效果：

注意，上方代碼中，我們給盒子設(shè)置了 transform 中的 rotate 旋轉(zhuǎn)，但同時(shí)還要給盒子設(shè)置 transition 過(guò)渡。如果沒(méi)有這行過(guò)渡的代碼，旋轉(zhuǎn)會(huì)直接一步到位，效果如下：（不是我們期望的效果）

案例1：小火箭

上方代碼中，我們將 transform 的兩個(gè)小屬性合并起來(lái)寫了。

案例2：撲克牌

rotate 旋轉(zhuǎn)時(shí)，默認(rèn)是以盒子的正中心為坐標(biāo)原點(diǎn)的。如果想改變旋轉(zhuǎn)的坐標(biāo)原點(diǎn)，可以用transform-origin屬性。格式如下：

 transform-origin: 水平坐標(biāo) 垂直坐標(biāo);
 transform-origin: 50px 50px;
 transform-origin: center bottom; //旋轉(zhuǎn)時(shí)，以盒子底部的中心為坐標(biāo)原點(diǎn)

我們來(lái)看一下 rotate 結(jié)合 transform-origin 的用法舉例。

代碼如下：

效果如下：

4、傾斜

3D 轉(zhuǎn)換

1、旋轉(zhuǎn)：rotateX、rotateY、rotateZ

3D坐標(biāo)系（左手坐標(biāo)系）

如上圖所示，伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分別代表X、Y、Z軸的正方向，這樣我們就建立了一個(gè)左手坐標(biāo)系。

瀏覽器的這個(gè)平面，是X軸、Y軸；垂直于瀏覽器的平面，是Z軸。

旋轉(zhuǎn)的方向：（左手法則）

左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸的正方向，正向就是其余手指卷曲的方向。

從上面這句話，我們也能看出：所有的3d旋轉(zhuǎn)，對(duì)著正方向去看，都是順時(shí)針旋轉(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 舉例

效果：

上方代碼中，我們最好加個(gè)透視的屬性，方能看到3D的效果；沒(méi)有這個(gè)屬性的話，圖片旋轉(zhuǎn)的時(shí)候，像是壓癟了一樣。

而且，透視的是要加給圖片的父元素 div，方能生效。我們?cè)诤竺鏁?huì)講解透視屬性。

（2）rotateY 舉例：

效果：

（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)在有下面這張圖片素材：

要求做成下面這種效果：

上面這張圖片素材其實(shí)用的是精靈圖。實(shí)現(xiàn)的代碼如下：

2、移動(dòng)：translateX、translateY、translateZ

格式：

 transform: translateX(100px); //沿著 X 軸移動(dòng)
 transform: translateY(360px); //沿著 Y 軸移動(dòng)
 transform: translateZ(360px); //沿著 Z 軸移動(dòng)

格式舉例：

（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必須配合透視來(lái)使用*/
 transform: translateZ(400px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

上方代碼中，如果不加透視屬性，是看不到translateZ的效果的。

3、透視：perspective

電腦顯示屏是一個(gè) 2D 平面，圖像之所以具有立體感（3D效果），其實(shí)只是一種視覺(jué)呈現(xiàn)，通過(guò)透視可以實(shí)現(xiàn)此目的。

透視可以將一個(gè)2D平面，在轉(zhuǎn)換的過(guò)程當(dāng)中，呈現(xiàn)3D效果。但僅僅只是視覺(jué)呈現(xiàn)出3d 效果，并不是正真的3d。

格式有兩種寫法：

• 作為一個(gè)屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素
• 作為 transform 屬性的一個(gè)值，做用于元素自身。

4、3D呈現(xiàn)（transform-style）

3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的，可以給這些元素的父元素設(shè)置transform-style: preserve-3d來(lái)使其變成一個(gè)真正的3D圖形。屬性值可以如下：

 transform-style: preserve-3d; //讓 子盒子 位于三維空間里
 transform-style: flat; //讓子盒子位于此元素所在的平面內(nèi)（子盒子被扁平化）

案例：立方體

動(dòng)畫

動(dòng)畫是CSS3中具有顛覆性的特征，可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn) 來(lái)精確控制一個(gè)或一組動(dòng)畫，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。

1、定義動(dòng)畫的步驟

（1）通過(guò)@keyframes定義動(dòng)畫；

（2）將這段動(dòng)畫通過(guò)百分比，分割成多個(gè)節(jié)點(diǎn)；然后各節(jié)點(diǎn)中分別定義各屬性；

（3）在指定元素里，通過(guò) animation 屬性調(diào)用動(dòng)畫。

之前,我們?cè)?js 中定義一個(gè)函數(shù)的時(shí)候，是先定義，再調(diào)用：

 js 定義函數(shù)：
 function fun(){ 函數(shù)體 }
 調(diào)用：
 fun();

同樣，我們?cè)?CSS3 中定義動(dòng)畫的時(shí)候，也是先定義，再調(diào)用：

 定義動(dòng)畫：
 @keyframes 動(dòng)畫名{
 from{ 初始狀態(tài) }
 to{ 結(jié)束狀態(tài) }
 }
 調(diào)用：
 animation: 動(dòng)畫名稱 持續(xù)時(shí)間；

其中，animation屬性的格式如下：

 animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

定義動(dòng)畫的格式舉例：

注意好好看代碼中的注釋。

效果如下：

2、動(dòng)畫屬性

我們剛剛在調(diào)用動(dòng)畫時(shí)，animation屬性的格式如下：

animation屬性的格式如下：

 animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

可以看出，這里的 animation 是綜合屬性，接下來(lái)，我們把這個(gè)綜合屬性拆分看看。

（1）動(dòng)畫名稱：

 animation-name: move;

（2）執(zhí)行一次動(dòng)畫的持續(xù)時(shí)間：

 animation-duration: 4s;

備注：上面兩個(gè)屬性，是必選項(xiàng)，且順序固定。

（3）動(dòng)畫的執(zhí)行次數(shù)：

 animation-iteration-count: 1; //iteration的含義表示迭代

屬性值infinite表示無(wú)數(shù)次。

（3）動(dòng)畫的方向：

 animation-direction: alternate;

屬性值：normal 正常，alternate 反向。

（4）動(dòng)畫延遲執(zhí)行：

 animation-delay: 1s;

（5）設(shè)置動(dòng)畫結(jié)束時(shí)，盒子的狀態(tài)：

 animation-fill-mode: forwards;

屬性值： forwards：保持動(dòng)畫結(jié)束后的狀態(tài)（默認(rèn)）， backwards：動(dòng)畫結(jié)束后回到最初的狀態(tài)。

（6）運(yùn)動(dòng)曲線：

 animation-timing-function: ease-in;

屬性值可以是：linear ease-in-out steps()等。

注意，如果把屬性值寫成steps()，則表示動(dòng)畫不是連續(xù)執(zhí)行，而是間斷地分成幾步執(zhí)行。我們接下來(lái)專門講一下屬性值 steps()。

steps()的效果

我們還是拿上面的例子來(lái)舉例，如果在調(diào)用動(dòng)畫時(shí)，我們寫成：

 animation: move2 4s steps(2);

效果如下：

有了屬性值 steps()，我們就可以作出很多不連續(xù)地動(dòng)畫效果。比如時(shí)鐘；再比如，通過(guò)多張靜態(tài)的魚，作出一張游動(dòng)的魚。

step()舉例：時(shí)鐘的簡(jiǎn)易模型

<!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)的中心點(diǎn)是底部 */
 animation: myClock 60s steps(60) infinite;
 }
 @keyframes myClock {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
 }
 </style>
</head>
<body>
<div></div>
</body>
</html>

上方代碼，我們通過(guò)一個(gè)黑色的長(zhǎng)條div，旋轉(zhuǎn)360度，耗時(shí)60s，分成60步完成。即可實(shí)現(xiàn)。

效果如下：

動(dòng)畫舉例：擺動(dòng)的魚

現(xiàn)在，我們要做下面這種效果，為了作出上面這種效果，要分成兩步。

（1）第一步：讓魚在原地?cái)[動(dòng)

魚在原地?cái)[動(dòng)并不是一張 gif動(dòng)圖，她其實(shí)是由很多張靜態(tài)圖間隔地播放，一秒鐘播放完畢，就可以了

圖片的url是http://img.smyhvae.com/20180209_1245.gif，圖片較大，如無(wú)法觀看，可在瀏覽器中單獨(dú)打開(kāi)。

上面這張大圖的尺寸是：寬 509 px、高 2160 px。

我們可以理解成，每一幀的尺寸是：寬 509 px、高 270 px。270 * 8 = 2160。讓上面這張大圖，在一秒內(nèi)從 0px 的位置往上移動(dòng)2160px，分成8步來(lái)移動(dòng)。就可以實(shí)現(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; /* 讓圖片一開(kāi)始位于 0 px的位置 */
 animation: sharkRun 1s steps(8) infinite; /* 一秒之內(nèi)，從頂部移動(dòng)到底部，分八幀， */
 }
 @keyframes sharkRun {
 0% {
 }
 /* 270 * 8 = 2160 */
 100% {
 background-position: left -2160px; /* 動(dòng)畫結(jié)束時(shí)，讓圖片位于最底部 */
 }
 }
 </style>
</head>
<body>
<div class="sharkBox">
 <div class="shark"></div>
</div>
</div>
</body>
</html>

我們不妨把上面的動(dòng)畫的持續(xù)時(shí)間從1s改成 8s，就可以看到動(dòng)畫的慢鏡頭

這下，你應(yīng)該恍然大悟了。

（2）第二步：讓魚所在的盒子向前移動(dòng)。

實(shí)現(xiàn)的原理也很簡(jiǎn)單，我們?cè)谏弦徊街幸呀?jīng)讓shark這個(gè)盒子實(shí)現(xiàn)了原地?fù)u擺，現(xiàn)在，讓 shark 所在的父盒子 sharkBox向前移動(dòng)，即可。完整版代碼是：

最后效果很好

這是我在學(xué)習(xí)CSS3動(dòng)畫的時(shí)候收藏的一篇好文，現(xiàn)在分享在這里，既方便大家學(xué)習(xí)參考，也方便日后查閱，最后感謝作者

鏈接文章

https://www.cnblogs.com/qianguyihao/p/8435182.html