Transition and animations
貝塞爾曲線在線工具(需翻墻)
貝塞爾曲線在線工具(無(wú)需翻墻)
在線示例
CSS3 Transitions Module
CSS3 Animations Module
圖靈 markdown中插入表格
excel轉(zhuǎn)成table
Transitions
CSS2.1沒有中間狀態(tài)，當(dāng)一個(gè)屬性的值發(fā)生改變勺届，這個(gè)變化是突然的(生硬的)。transition可以讓這種變化更平滑。
transition是個(gè)implicit動(dòng)畫，只有當(dāng)屬性的值發(fā)生改變時(shí)才會(huì)被觸發(fā)缎岗。
transition要發(fā)生捷绒，需要四個(gè)條件：一個(gè)初始值，一個(gè)結(jié)束值殿托，transition屬性，一個(gè)觸發(fā)器剧蚣。觸發(fā)器可以是支竹，通過(guò)JS或元素的:hover偽類來(lái)改元元素要被過(guò)渡的屬性旋廷。
transition-property
transition-property指定一個(gè)元素的哪些屬性將會(huì)產(chǎn)生過(guò)渡動(dòng)畫效果。
語(yǔ)法：
E { transition-property: keyword; }
keyword可以是all礼搁、none或是一組有效的css屬性饶碘，默認(rèn)值是all，就是說(shuō)所有屬性都會(huì)產(chǎn)生過(guò)渡動(dòng)畫效果馒吴。
transition-duration
定義過(guò)渡動(dòng)畫持續(xù)的時(shí)間扎运。
語(yǔ)法：
E { transition-duration: time; }
time是個(gè)數(shù)值，單位可是ms或s饮戳，默認(rèn)值是0豪治，所以當(dāng)需要一個(gè)過(guò)渡動(dòng)畫時(shí)，這個(gè)屬性必須設(shè)置扯罐。
transition-timing-function
此屬性用來(lái)定義過(guò)渡動(dòng)畫使用的過(guò)渡方式负拟，用三類值：關(guān)鍵字、cubic-bezier()函數(shù)和steps()函數(shù)歹河。
-
關(guān)鍵字
語(yǔ)法如下：
E { transition-timing-function: keyword; }
可以使用的關(guān)鍵字有：ease, linear, ease-in, ease-out, ease-in-out掩浙。
默認(rèn)值是ease，開始慢秸歧，然后加速厨姚，最后再次慢下來(lái)。
linear键菱，線性的谬墙，勻速的。
ease-in纱耻，只有在in(開始)的時(shí)候慢芭梯，然后加速到結(jié)束。
ease-out弄喘，正好和ease-in相反玖喘，只有在out(結(jié)束)的時(shí)候慢，就是說(shuō)一開始很快蘑志，然后減速到結(jié)束累奈。
ease-in-out，在in(開始)和out(結(jié)束)的時(shí)候慢急但，中間過(guò)程快澎媒。
* 簡(jiǎn)書這里讓人不爽，在寫這些圖片時(shí)波桩，并沒有換行戒努，所以應(yīng)該盡可能讓圖片在一行上可以顯示多個(gè)，可是最終卻是這樣子镐躲，一張圖一行....
-
cubic-bezier()
語(yǔ)法如下：
E { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }
看下圖储玫，X和Y軸都是從0到1侍筛。并且有四個(gè)點(diǎn):P0, P1, P2, P3。
P0總是在(0,0)處撒穷，P1由(x1,y1)來(lái)確定匣椰，P2由(x2,y2)來(lái)確定，P3總是在(1,1)處端礼。
上圖的坐標(biāo)說(shuō)明：
| Point | Coordinates(x,y) |
|---|---|
| P0 | (0,0) |
| P1 | (0.6,0.1) |
| P2 | (0.15,0.7) |
| P3 | (1.0,1.0) |
之前討論的關(guān)鍵字都可以通過(guò)cubic-bezier()函數(shù)來(lái)定義：
| Keyword | Cubic Bezier Value |
|---|---|
| ease | 0.25, 0.1, 0.25, 1 |
| linear | 0, 0, 1, 1 |
| ease-in | 0.42, 0, 1, 1 |
| ease-out | 0, 0, 0.58, 1 |
| ease-in-out | 0.42, 0, 0.58, 1 |
cubic-bezier()像transformation中介紹的matrix()一樣另人生畏禽笑，其實(shí)上面的那些關(guān)鍵字已經(jīng)完全夠用了。這里推薦個(gè)在線工具http://cubic-bezier.com/蛤奥，可以可視化的制作cubic-bezier()函數(shù)佳镜，并且可以和關(guān)鍵字的效果做比較。
-
steps()
語(yǔ)法：
E { transition-timing-function: steps(count, direction); }
count是個(gè)整數(shù)喻括，代表動(dòng)畫間隔執(zhí)行的次數(shù)邀杏。direction有兩個(gè)關(guān)鍵字：start贫奠、end唬血，默認(rèn)是end，設(shè)置動(dòng)畫在每個(gè)間隔的執(zhí)行點(diǎn)唤崭。
* 可以把圖中的虛線處理解為動(dòng)畫在執(zhí)行
transition-delay
如其名拷恨，動(dòng)畫推遲執(zhí)行的時(shí)間。
E { transition-delay: time; }
與transition-duration一樣谢肾，time是個(gè)數(shù)值腕侄，單位可以是ms或s，默認(rèn)值是0芦疏，所以transition會(huì)立即執(zhí)行冕杠。可以為負(fù)數(shù)：
E {
transition-duration: 4s;
transition-delay: -2s;
}
當(dāng)動(dòng)畫被觸發(fā)時(shí)酸茴，動(dòng)畫會(huì)從中間開始分预，好像前面的2S已經(jīng)被執(zhí)行了似的。
transition shorthand property
h1 {
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 250ms;
}
可縮寫為：
h1 { transition: font-size 2s ease-out 250ms; }
同時(shí)執(zhí)行多個(gè)過(guò)渡動(dòng)畫
/* 以下兩個(gè)規(guī)則效果是一樣的 */
E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms, 4s;
}
E { transition: border-width 4s, height 500ms, padding 4s; }
如果出現(xiàn)下面這種情況：
E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms;
}
如果一個(gè)屬性的值少于其他屬性薪捍，那么循環(huán)使用這個(gè)屬性的值笼痹。所以結(jié)果是：
transition-property |
transition-duration |
|---|---|
border-width |
4s |
height |
500ms |
padding |
4s |
Animations
Transition(過(guò)渡)挺好，但也有其局限性酪穿，只有當(dāng)屬性值發(fā)生變化時(shí)才會(huì)產(chǎn)生過(guò)渡動(dòng)畫凳干。Animations打破了這個(gè)局限，語(yǔ)法上和Transition和很多相似之處被济。
IE10+支持Animations救赐，基于Webkit的瀏覽器需要加上廠商前綴-webkit-
keyframes
如其名，關(guān)鍵幀只磷，來(lái)定義動(dòng)畫過(guò)程中某位置的幀经磅。
簡(jiǎn)單的動(dòng)畫有兩個(gè)關(guān)鍵幀就行少欺，在開始和結(jié)束處。復(fù)雜動(dòng)畫需要更多的幀馋贤，但是要在開始和結(jié)束幀之間赞别。
@keyframes name{
selector{ property: value; }
}
name定義關(guān)鍵幀的名字，selector定義某個(gè)關(guān)鍵幀的位置配乓，其值通過(guò)是百分比仿滔，還有兩個(gè)關(guān)鍵字from(0%)和to(100%)。每個(gè)關(guān)鍵幀位置會(huì)定義一系列CSS規(guī)則犹芹，當(dāng)元素的動(dòng)畫執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)崎页，這個(gè)關(guān)鍵幀定義的CSS規(guī)則會(huì)被用于這個(gè)元素(當(dāng)然這個(gè)過(guò)程像transition一樣，逐漸平穩(wěn)地過(guò)渡)腰埂。描述起來(lái)怎么這么繞口....
@keyframes expand {
from { border-width: 4px; }
50% { border-width: 12px; }
to {
border-width: 4px;
height: 100%;
width: 100%;
}
}
每個(gè)關(guān)鍵幀處的屬性值都會(huì)繼承元素的屬性飒焦，如果上例中to處的關(guān)鍵幀沒有定義border-width屬性值，那么其會(huì)繼承元素本身border-width的值屿笼。
animation-name
此屬性的值是@keyframes的名字牺荠，默認(rèn)值是none
div { animation-name: expand; }
animation-duration
此屬性定義動(dòng)畫的持續(xù)時(shí)間，類似transition-duration屬性驴一。
div { animation-duration: 6s; }
animation-timing-function
類似transition-timing-function屬性休雌，該屬性的值可以是關(guān)鍵字，cubic-bezier()函數(shù)或steps()函數(shù)肝断。
div { animation-timing-function: ease-in; }
animation-delay
類似transition-delay杈曲，動(dòng)畫延遲執(zhí)行的時(shí)間。
div { animation-delay: 2s; }
animation-iteration-count
不像transition只能夠執(zhí)行一次胸懈，動(dòng)畫可以被執(zhí)行任意次担扑，此屬性設(shè)置動(dòng)畫執(zhí)行的次數(shù)。
此屬性的值要么是一個(gè)整數(shù)趣钱，要么是關(guān)鍵字infinite涌献，默認(rèn)值是1。
如果值是0或負(fù)數(shù)羔挡，則動(dòng)畫不會(huì)被執(zhí)行洁奈。
div { animation-iteration-count: 10; }
animation-direction
此屬性有兩個(gè)值：normal和alternate，默認(rèn)值是normal绞灼。
div { animation-direction: alternate; }
如果動(dòng)畫被執(zhí)行兩次利术，看下面:
animation-fill-mode
當(dāng)animation-iteration-count的值不是infinite時(shí)，此屬性設(shè)置元素在動(dòng)畫周期外如何顯示低矮。該屬性的值可以是：backwards印叁、forwards、both，默認(rèn)值是none轮蜕。
backwards昨悼，from處的關(guān)鍵幀規(guī)則被應(yīng)用到元素，在動(dòng)畫開始之前跃洛。
forwards率触，to處的關(guān)鍵幀規(guī)則被應(yīng)用到元素，在動(dòng)畫結(jié)束之后汇竭。
both葱蝗，from處的關(guān)鍵幀規(guī)則被應(yīng)用到元素，在動(dòng)畫開始之前细燎；to處的關(guān)鍵幀規(guī)則被應(yīng)用到元素两曼，在動(dòng)畫結(jié)束之后。
E { animation-fill-mode: both ; }
* 沒整明白這個(gè)屬性有什么用....
animation-play-state
設(shè)置動(dòng)畫是否是活動(dòng)的玻驻，可以用來(lái)開啟或暫停動(dòng)畫悼凑。其值可以是：running、paused璧瞬。
E { animation-play-state: keyword; }
下例户辫，當(dāng)鼠標(biāo)在div上時(shí)，動(dòng)畫被暫停彪蓬，直到鼠標(biāo)離開div寸莫，動(dòng)畫繼續(xù)捺萌。
div:hover { animation-play-state: paused; }
animation shorthand
E {
animation: name duration timing-function delay iteration-count direction
fill-mode play-state;
}
/* 以下兩個(gè)規(guī)則是等價(jià)的 */
div {
animation-name: expand;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
div { animation: expand 6s ease-in 2s 10 alternate forwards running; }
animation最簡(jiǎn)單的寫法档冬，只需要兩個(gè)屬性，關(guān)鍵幀的名字和duration桃纯。
div { animation: expand 6s; }
一個(gè)元素同時(shí)執(zhí)行多個(gè)動(dòng)畫
E {
animation-name: first-anim, second-anim;
animation-duration: 6s, 1.25ms;
animation-delay: 0, 750ms;
}
E{ animation: first-anim 6s, second-anim 1.25ms 750ms; }
此文是對(duì)《The Book of CSS3 2nd edition》第14章的翻譯酷誓、理解和記錄，方便以后查閱态坦。
感謝其作者Peter Gasston !
