transition(過(guò)渡)
在CSS3引入transition之前css沒(méi)有時(shí)間軸鸽照，所有的狀態(tài)變化都是瞬間完成
div{
height:15px;
width:15px;
}
div:hover{
height: 450px;
width: 450px;
}
transition的作用在于颠悬，指定狀態(tài)變化所需要的時(shí)間
transition: 1s;
指定屬性
我們還可以指定transition適用的屬性，比如只適用于height
transition: 1s height;
這樣一來(lái)诞外，只有height的變化需要1秒實(shí)現(xiàn)灾票，其他變化（主要是width）依然瞬間實(shí)現(xiàn)，在同一行transition語(yǔ)句中刊苍，可以分別指定多個(gè)屬性
transition: 1s height, 1s width;
delay（延時(shí)）
我們還可以指定變化的延時(shí)開(kāi)始，比如這個(gè)地方我們希望讓height先發(fā)生變化啥纸，等結(jié)束以后，再讓width發(fā)生變化脾拆， 我們只需要為width指定一個(gè)delay參數(shù)
transition: 1s height, 1s 1s width;
上面代碼指定莹妒，width在1秒之后，再開(kāi)始變化旨怠，也就是延遲（delay）1秒
delay的真正意義在于，它指定了動(dòng)畫(huà)發(fā)生的順序鉴腻，使得多個(gè)不同的transition可以連在一起百揭，形成復(fù)雜效果
transition-timing-function
transition的狀態(tài)變化速度（又稱timing function）蜓席，默認(rèn)不是勻速的，而是逐漸放慢祈秕，這叫做ease
除了ease以外雏胃，其他模式還包括
- linear：勻速
- ease-in：加速
- ease-out：減速
- cubic-bezier函數(shù)(貝塞爾函數(shù))
語(yǔ)法
transition: 1s 1s height ease;
這其實(shí)是一個(gè)簡(jiǎn)寫(xiě)形式，可以單獨(dú)定義成各個(gè)屬性
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
注意事項(xiàng)
- 目前瞭亮，各大瀏覽器（包括IE 10）都已經(jīng)支持無(wú)前綴的transition，所以transition已經(jīng)可以很安全地不加瀏覽器前綴
- transition需要明確知道仙蚜，開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)鳍征，什么none到block之類(lèi)的是不行的
- transition是一次性的面徽，不能重復(fù)發(fā)生匣掸，除非一再觸發(fā)
事件
transitionend
- transitionend 事件會(huì)在 CSS transition 結(jié)束后觸發(fā).
- 當(dāng)transition完成前移除transition時(shí)，比如移除css的transition-property 屬性碰酝，事件將不會(huì)被觸發(fā).如在transition完成前設(shè)置 display: none，事件同樣不會(huì)被觸發(fā).
- 幾個(gè)屬性發(fā)生了變化就觸發(fā)幾次,比如
div{
transition: height 1s, width 1s;
}
div:hover{
width: 100px;
height: 100px;
}
一次hover會(huì)觸發(fā)兩次transitionend事件
- 注意不同瀏覽器中的前綴
- webkitTransitionEnd
- mozkitTransitionEnd
animation(動(dòng)畫(huà))
transition 比較簡(jiǎn)單铛嘱，animation可以幫我們實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)
基本用法
@keyframes change-color{
0% {
background: red;
}
50%{
background: blue;
}
100%{
background: orange;
}
}
div{
height: 100px;
width: 200px;
border: 1px solid #111;
}
div:hover{
animation-name: change-color;
animation-duration: 2s;
}
我們使用keyframes(關(guān)鍵幀)來(lái)定義一個(gè)動(dòng)畫(huà)效果, change-color是我們?nèi)〉脛?dòng)畫(huà)名字袭厂，每個(gè)百分比后面寫(xiě)的是相應(yīng)時(shí)間點(diǎn)我關(guān)鍵幀樣式，
定義好后纹磺，在animation(動(dòng)畫(huà))屬性中調(diào)用，2s 表示的動(dòng)畫(huà)的持續(xù)時(shí)間
指定播放次數(shù)(animation-iteration-count)
默認(rèn)情況下秘症，動(dòng)畫(huà)只會(huì)播放一次， 我們可以指定動(dòng)畫(huà)具體播放的次數(shù)乡摹，比如3次：
div:hover {
animation-name: change-color;
animation-duration: 2s;
animation-iteration-count: 3;
}
也可以無(wú)線循環(huán)播放：
div:hover {
animation-name: change-color;
animation-duration: 2s;
animation-iteration-count: infinite;
}
延時(shí)(animation-delay)
animation-timing-function
動(dòng)畫(huà)播放前后的狀態(tài)(animation-fill-mode)
animation-fill-mode: none | backwards | forwards| both;
- none: 動(dòng)畫(huà)執(zhí)行前后不改變?nèi)魏螛邮?/li>
- forwards: 動(dòng)畫(huà)結(jié)束后的目標(biāo)保持動(dòng)畫(huà)最后一幀的樣式
- backwards: 動(dòng)畫(huà)開(kāi)始前目標(biāo)保持動(dòng)畫(huà)第一幀的樣式(必須配合延時(shí)才能看到效果, 如果設(shè)置為backwards, 延時(shí)期間的樣式是動(dòng)畫(huà)第一幀的樣式, 否則延時(shí)期間是目標(biāo)默認(rèn)樣式)
- both: 同時(shí)應(yīng)用forwards和 backwards
動(dòng)畫(huà)播放的方向(animation-direction)
動(dòng)畫(huà)連續(xù)播放時(shí)聪廉，每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)瞬痘，再開(kāi)始播放锄列。animation-direction屬性，可以改變這種行為
animation-direction可以使用下列值:
- normal: 正常播放, 默認(rèn)值;
- reverse: 倒著播放
- alternate: 第一次正常播放, 第二倒著播放, .. 這樣交替的循環(huán)下去
- alternate-reverse: 第一次倒著播放, 第二次正常播放, .. 這樣交替的循環(huán)下去
下圖解釋了它的規(guī)律（假定動(dòng)畫(huà)連續(xù)播放三次）
簡(jiǎn)單說(shuō)竣况，animation-direction指定了動(dòng)畫(huà)播放的方向筒严，最常用的值是normal和reverse。瀏覽器對(duì)其他值的支持情況不佳鸭蛙，應(yīng)該慎用
語(yǔ)法
div:hover {
animation-name: change-color;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
簡(jiǎn)寫(xiě)
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;
例子:
div:hover {
animation: 1s 1s change-color linear 3 forwards normal;
}
keyframes關(guān)鍵字用來(lái)定義動(dòng)畫(huà)的各個(gè)狀態(tài)，它的寫(xiě)法相當(dāng)自由
@keyframes change-color {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
0%可以用from代表晒哄，100%可以用to代表肪获，因此上面的代碼等同于下面的形式
@keyframes change-color {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
如果省略某個(gè)狀態(tài)，瀏覽器會(huì)自動(dòng)推算中間狀態(tài)孝赫，所以下面都是合法的寫(xiě)法。
@keyframes change-color {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes change-color {
to { background: yellowgreen }
}
甚至伐债，可以把多個(gè)狀態(tài)寫(xiě)在一行致开。
div:hover {
animation: 1s change-color infinite steps(10);
}
另外一點(diǎn)需要注意的是，瀏覽器從一個(gè)狀態(tài)向另一個(gè)狀態(tài)過(guò)渡双戳，是平滑過(guò)渡。steps函數(shù)可以實(shí)現(xiàn)分步過(guò)渡。
div:hover {
animation: 1s change-color infinite steps(10);
}
animation-play-state
有時(shí)耍目，動(dòng)畫(huà)播放過(guò)程中徐绑，會(huì)突然停止浓镜。這時(shí)鸿摇，默認(rèn)行為是跳回到動(dòng)畫(huà)的開(kāi)始狀態(tài)洪灯，如果想讓動(dòng)畫(huà)保持突然終止時(shí)的狀態(tài)，就要使用animation-play-state屬性喻粹。
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
