零：總結(jié)
-
從一個(gè)狀態(tài)到最終狀態(tài)的一個(gè)動(dòng)畫(huà)校赤，相當(dāng)于動(dòng)畫(huà)：可以理解為沒(méi)有中間過(guò)渡的動(dòng)畫(huà)
- 觸發(fā)原因：狀態(tài)(屬性)的改變
- 觸發(fā)方式：
-
偽類選擇器(動(dòng)作類)
知識(shí)補(bǔ)充：對(duì)于狀態(tài)類：link :visited為超鏈接專用吆玖，(a鏈接正確書(shū)寫(xiě)方式:LVHA:覆蓋)
- ：hover 長(zhǎng)懸浮觸發(fā)過(guò)渡
- ：active 長(zhǎng)按觸發(fā)過(guò)渡
√
- ：focus 獲得焦點(diǎn)觸發(fā)過(guò)渡 只針對(duì)能獲得焦點(diǎn)的元素(表單)
- ：checked 選中元素觸發(fā)過(guò)渡筒溃。僅適用于單選按鈕或復(fù)選框
動(dòng)態(tài)改變屬性值：js
- 改變?cè)撛氐膶傩灾?/li>
- 改變?cè)撛氐腸lass值
-
多個(gè)狀態(tài)的一個(gè)動(dòng)畫(huà)翅阵，相對(duì)于過(guò)渡歪玲，可以理解為有多個(gè)中間過(guò)渡的動(dòng)畫(huà)
- 觸發(fā)原因：
動(dòng)畫(huà)屬性的改變
- 動(dòng)畫(huà)屬性都具備了，則會(huì)啟動(dòng)動(dòng)畫(huà)
- 修改了
animation-name:會(huì)從最初狀態(tài)執(zhí)行新的動(dòng)畫(huà)
- 修改了
animation-duration:會(huì)映射到某個(gè)狀態(tài)然后繼續(xù)動(dòng)畫(huà)掷匠，如一開(kāi)始4s滥崩。執(zhí)行一秒后，暫停1s讹语，再設(shè)置為10s钙皮。如果勻速則會(huì)從一半的位置繼續(xù)
-
animation-play-state:paused/running;修改動(dòng)畫(huà)狀態(tài)為暫停或者運(yùn)行 √
- 觸發(fā)方式：對(duì)比過(guò)渡顽决，只能
動(dòng)態(tài)改變屬性值：js
- 塞貝爾曲線 和 逐幀動(dòng)畫(huà)steps(step,[start|end])
- 過(guò)渡的塞貝爾曲線短条，作用于過(guò)渡
-
動(dòng)畫(huà)的塞貝爾曲線，也是作用于每一個(gè)過(guò)渡(注意不是整個(gè)動(dòng)畫(huà)哦) √
即：動(dòng)畫(huà)的過(guò)渡間的運(yùn)行軌跡是由時(shí)間百分比來(lái)決定的
動(dòng)畫(huà)的過(guò)渡內(nèi)的運(yùn)行軌跡是由塞貝爾曲線來(lái)決定的
-
steps()
語(yǔ)法：animation-timing-function：steps(stepNumber[, end | start])
說(shuō)明：塞貝爾曲線是作用于每一個(gè)過(guò)渡的擎值，steps是特殊的一種塞貝爾曲線慌烧，即也是作用于每一個(gè)過(guò)渡
eg:
@keyframes myfirst
{
0% {} 20% {} 40% {} 60% {} 80% {} 100% {}
}
即：0%-20% 、20%-40%鸠儿、...之間不再是連續(xù)過(guò)渡屹蚊，而是分為stepNumber跨步
那什么時(shí)候跳躍呢？=>跳躍點(diǎn)為每一個(gè)跨步的[, end | start]
-
轉(zhuǎn)換：transform:轉(zhuǎn)換transform也是css屬性进每。其改變也會(huì)觸發(fā)過(guò)渡及動(dòng)畫(huà)
- 轉(zhuǎn)換汹粤，原來(lái)空間不變，即
轉(zhuǎn)換田晚，默認(rèn)給加了relative屬性 √
-
可以定義多個(gè)過(guò)渡嘱兼，如：transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
1.過(guò)渡語(yǔ)法：
transition: width 1s linear 2s，[...]; //屬性 時(shí)長(zhǎng) 曲線 延遲贤徒∏酆荆可以多屬性
2.動(dòng)畫(huà)語(yǔ)法：
animation: myfirst 5s linear 2s infinite alternate;//動(dòng)畫(huà)名稱 一周時(shí)長(zhǎng) 曲線 延遲 播放次數(shù) 是否反轉(zhuǎn)
3.轉(zhuǎn)換語(yǔ)法：
transform: none|transform-functions;//translate(e,f)偏移； scale(a,d)縮放接奈； rotate(α)旋轉(zhuǎn)踢涌；
transform-origin:50% 50% 0%;//設(shè)置中心點(diǎn)
一、過(guò)渡
1. 過(guò)渡屬性語(yǔ)法
語(yǔ)法：transition: width 1s linear 2s序宦，[...]; //屬性 時(shí)長(zhǎng) 曲線 延遲 可以多屬性
屬性：none|all|property
曲線：cubic-bezier(x1,y1,x2,y2) 或字面量linear|ease|ease-in|ease-out|ease-in-out
內(nèi)塞爾曲線
二睁壁、動(dòng)畫(huà)
1.動(dòng)畫(huà)屬性語(yǔ)法
語(yǔ)法：animation: myfirst 5s linear 2s infinite alternate;//動(dòng)畫(huà)名稱 一周時(shí)長(zhǎng) 曲線 延遲 播放次數(shù) 是否反轉(zhuǎn)
曲線：內(nèi)塞爾曲線和過(guò)渡的一樣
播放次數(shù)：animation-iteration-count: n|infinite; infinite:無(wú)數(shù)次
是否反轉(zhuǎn)：nimation-direction: normal|alternate; alternate播放一周后輪流反向播放
`animation-play-state `屬性：paused|running; 屬性規(guī)定動(dòng)畫(huà)正在運(yùn)行還是暫停
2. 定義動(dòng)畫(huà)
eg:
@keyframes myfirst
{
0%,
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
40%,
100% {top:0px; left:0px; background:red;}
}
3.常見(jiàn)動(dòng)畫(huà)及成品
三、轉(zhuǎn)換(2D/3D)
1. 語(yǔ)法
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)潘明、縮放行剂、移動(dòng)或傾斜
語(yǔ)法：
transform: none|transform-functions;
transform-origin:50% 50% 0%;//設(shè)置中心點(diǎn)
2. transform-functions轉(zhuǎn)換函數(shù)（移動(dòng),縮放,傾斜,旋轉(zhuǎn)）
理解概念：
知識(shí)儲(chǔ)備：線性代數(shù)矩陣乘法其實(shí)就是對(duì)應(yīng)空間轉(zhuǎn)換
2D轉(zhuǎn)換：matrix(a,b,c,d,e,f) 對(duì)應(yīng)2D矩陣為[x,y,1]
| a c e | | x | | ax+cy+e |
| b d f | * | y | = | bx+dy+f |
| 0 0 1 | | 1 | | 0+0+1 |
即(x,y,1)通過(guò)matrix(a,b,c,d,e,f)矩陣處理后。
成為(ax+cy+e,bx+dy+f,1)
為了更好的理解這些參數(shù)對(duì)轉(zhuǎn)換的影響
換成：(ax+cy+e,dy+bx+f,1)
所以a,d是對(duì)xy的縮放钳降。cb是對(duì)xy的傾斜厚宰。ef是對(duì)xy的偏移
可以實(shí)現(xiàn)所有以下功能
移動(dòng)( translate(e,f) )，縮放( scale(a,d) )
傾斜( skew(b,c) )牲阁，旋轉(zhuǎn)( rolate(ang,ang) )
若移動(dòng) 則對(duì)應(yīng)ef固阁。e為x移動(dòng)距離壤躲，f為y移動(dòng)距離：理解：x->...+e; y->...+f
若縮放 則對(duì)應(yīng)ad城菊。a為x方向縮放，d為y方向縮放：理解：x->ax; y->dy
若傾斜 則對(duì)應(yīng)bc碉克。b對(duì)應(yīng)y傾斜凌唬，c對(duì)應(yīng)x傾斜：理解：x->ax+cy ;y->dy+bx
若旋轉(zhuǎn) 則對(duì)應(yīng)abcd。(cosα,sinα,-sinα,cosα,0,0)漏麦；
一句話：
matrix(a,b,c,d,e,f) ad縮放客税。cb傾斜。ef偏移
3. 總結(jié)
1.移動(dòng)(偏移)
matrix(1,0,0,1,e,f)
translate(e,f)
2.縮放
matrix(a,0,0,d,0,0)
scale(a,d)
3.旋轉(zhuǎn)
matrix(cosα,sinα,-sinα,cosα,0,0)撕贞；
rotate(α)
4.常見(jiàn)轉(zhuǎn)換及成品
四更耻、漸變
1. 語(yǔ)法
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
eg：
background-image:
linear-gradient(to right,transparent 0%, grey 50%,transparent 100%), /* 第4層 動(dòng)畫(huà) */
radial-gradient(circle closest-side at center, white 100%, transparent)；/* 第3層 頭像 */
