css3中transition和animation都能夠?qū)崿F(xiàn)動畫效果涯肩，所謂動畫本質(zhì)就是物體的一種狀態(tài)變換成另外一種狀態(tài)的過程呈現(xiàn)轿钠，我們可以結(jié)合2D或者3D變換做出很多酷炫的動畫，下面針對這四部分分別做一個(gè)用法上的小結(jié)病苗。
一疗垛、Transition過渡
1.定義
- 過渡動畫：是從一個(gè)狀態(tài)漸漸地過渡到另外一個(gè)狀態(tài)
- 經(jīng)常:hover 等等一起搭配使用，也就是說一般會經(jīng)過一個(gè)動作觸發(fā)之后硫朦，再進(jìn)行變換贷腕。
2.用法
transition:要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動曲線 何時(shí)開始;
- 屬性：想要變換的css屬性，寬度咬展、高度泽裳、背景顏色、內(nèi)外邊距都可以破婆，如果想要所有的屬性都變化過渡涮总。
- 花費(fèi)時(shí)間：單位是秒（必須寫單位）比如0.5s
- 運(yùn)動曲線：默認(rèn)是ease（可以省略）（linear、ease祷舀、ease-in瀑梗、ease-out烹笔、ease-in-out）
- 何時(shí)開始：單位是秒（必須寫單位）可以設(shè)置延遲觸發(fā)，默認(rèn)是0s（可以省略）
3.口訣
誰做過渡給誰加
二抛丽、Animation動畫
Animation動畫其實(shí)是定義了多個(gè)關(guān)鍵幀谤职，然后通過按照一定的時(shí)間順序播放這些關(guān)鍵幀從而形成了動畫。
1.基本使用
- 首先定義動畫
- 再使用（調(diào)用）動畫
.box{
//使用動畫（使用一個(gè)動畫最少要設(shè)置名稱與動畫時(shí)間）
animation-name: 動畫名稱;
animation-duration:1s;
...
}
#定義示例
@keyframes 動畫名稱 {
0% {
width:100px;
}
100% {
width:200px;
}
}
2.動畫序列
- 0%是動畫的開始亿鲜，100%是動畫的完成允蜈。
- 在@keyframes中定義某個(gè)css樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改變?yōu)樾聵邮降膭赢嬓Ч?/li>
- 動畫是使元素從一種樣式變換到另外一種樣式的效果狡门，你可以定義任意多的樣式以及任意多的次數(shù)陷寝。
- 關(guān)鍵詞"from"和"to"相當(dāng)于“0%”和"100%"
3.動畫屬性
- animation-name（動畫名稱）：規(guī)定@keyframes的動畫名稱（必須）
- animation-duration（動畫時(shí)間）：規(guī)定動畫完成一個(gè)周期所花費(fèi)的時(shí)間，單位是秒或者毫秒其馏。（必須）
- animation-timing-function（動畫速度曲線）：linear凤跑、ease、ease-in叛复、ease-out仔引、ease-in-out、 steps()
- animation-delay（動畫延遲）：規(guī)定動畫何時(shí)開始褐奥，默認(rèn)是0
- animation-iteration-count（動畫次數(shù)）：規(guī)定動畫被播放的次數(shù)咖耘，默認(rèn)是1，infinite是一直播放撬码。
- animation-direction（動畫方向）：規(guī)定動畫是否在下一周期逆向播放儿倒，默認(rèn)是"normal"，alternate是逆向播放呜笑。
- animation-play-state（動畫播放狀態(tài)）：規(guī)定動畫是否正在運(yùn)行或者暫停夫否，默認(rèn)是running，pause是暫停
- animation-fill-mode（動畫完成時(shí)的狀態(tài)）：規(guī)定動畫結(jié)束后的狀態(tài)叫胁，forwards是保持結(jié)束后的狀態(tài)凰慈，backwards是返回到起始狀態(tài)。
4.動畫簡寫
#注意：簡寫的時(shí)候沒有animation-play-state
animation: <動畫名稱> <動畫時(shí)間> <動畫速度曲線> <動畫延遲> <動畫次數(shù)> <動畫方向> <動畫完成時(shí)的狀態(tài)>
5.steps() 分幾步完成動畫可參考示例
#代碼示例
div{
width:0px;
height:30px;
background-color:red;
animation: ani 4s steps(5) forwards
}
@keyframes ani{
0% {
width:0px;
}
100% {
width:200px;
}
}
6.連續(xù)執(zhí)行多個(gè)動畫
#1.多個(gè)動畫正常情況下是同時(shí)執(zhí)行的
#2.如果需要形成按照順序執(zhí)行驼鹅，可以通過animation-delay控制后動畫執(zhí)行的先后順序
#3.以下示例就是第一個(gè)動畫寬度變化1秒之后微谓，第二個(gè)動畫高度變化，就形成了按照順序執(zhí)行動畫输钩。
.box {
width: 0px;
height: 10px;
background-color: pink;
animation: ani1 1s forwards, ani2 5s ease 1s forwards;
}
@keyframes ani1 {
0% {
width: 0px;
}
100% {
width: 200px;
}
}
@keyframes ani2 {
0% {
height: 10px;
}
100% {
height: 200px;
}
}
三豺型、2D變換
（1）2D變換之位移translate
改變元素在頁面中的位置
1.語法
transform:translate(x,y); //沿著X軸與Y軸分別移動x與y的距離
transform:translateX(n); //沿著X軸移動n的距離
transform:translateY(n); //沿著Y軸移動n的距離
2.重點(diǎn)
- 定義2D變換中的移動，沿著X軸與Y軸移動元素
- translate最大的優(yōu)點(diǎn)是不會影響到其他元素的位置
- translate中百分比單位是相對于自身元素的买乃，例如：translate(50%,50%)
- 對行內(nèi)標(biāo)簽沒有效果
（2）2D變換之旋轉(zhuǎn)rotate
2D旋轉(zhuǎn)是指元素在2緯平面內(nèi)進(jìn)行順時(shí)針或者逆時(shí)針旋轉(zhuǎn)
1.語法
transform:rotate(角度)
2.重點(diǎn)
- rotate里面是度數(shù)触创，單位是（deg），比如：rotate(45deg)
- 角度為正時(shí)为牍，順時(shí)針哼绑；負(fù)時(shí)，逆時(shí)針
- 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)
（3）2D變換之縮放scale
針對元素進(jìn)行放大或者縮小
1.語法
transform:scale(x,y)
2.重點(diǎn)
- 注意其中的x,y使用逗號分隔
- transform:scale(1,1)：寬和高都放大1倍相當(dāng)于沒有放大
- transform:scale(2)：只寫一個(gè)參數(shù)的時(shí)候碉咆，第二個(gè)參數(shù)相當(dāng)于跟第一個(gè)參數(shù)一樣
- transform:scale(0.5,0.5)：縮小
- scale最大的優(yōu)勢是不會因?yàn)樽陨泶笮〉目s放影響到其他元素
（4）2D變換之元素中心點(diǎn)設(shè)置
我們可以設(shè)置元素變換的中心點(diǎn)
1.語法
transform-origin:x y
2.重點(diǎn)
- 注意后面的參數(shù)x與y用空格分開
- x抖韩、y默認(rèn)的變換的中心點(diǎn)是元素的中心點(diǎn)（50% 50%）
- 可以給x、y設(shè)置像素或者方位詞（top left right bottom center）
（5）2D變換之綜合寫法注意事項(xiàng)
同時(shí)做多種變換時(shí)可以使用綜合寫法
1.語法
transform:translate(100) scale(1.1,2) rotate(180deg) ...
2.重點(diǎn)
- 當(dāng)我們同時(shí)有位移和其他屬性的變換的時(shí)候疫铜，一定要把位移變換放在最前面茂浮。
四、3D變換參考
（1）3D移動translate3d(x,y,z)
transform:translate3d(x,y,z)
transform:translateZ(n)
（2）3D旋轉(zhuǎn)rotate3d(x,y,z)
transform:rotate3d(x,y,z)
（3）透視perspective
透視需要寫在被觀察元素的父盒子上面
#代碼示例
body{
perspective:500px;
}
（4）3D旋轉(zhuǎn)transform-style
- 控制子元素是否開啟三維立體環(huán)境
- transform-style:flat 子元素不開啟三維立體環(huán)境壳咕，默認(rèn)的
- transform-style:preserve 子元素開啟三維立體環(huán)境
- 代碼是寫給父級席揽，但是影響的是子級
transform-style: preserve-3d;
