Part1看這里：Transition
學(xué)會(huì)Animation能夠?qū)懗霰葐渭兊膖ransition炫酷的多的動(dòng)畫效果勘畔，要學(xué)習(xí)animation前先要了解keyframes的寫法，這兩個(gè)屬性必須要成對(duì)使用才有效果杨凑。
1 keyframes
語(yǔ)法
@keyframes [name] {
from {
[styles];
}
to {
[styles];
}
}
keyframes不需要任何選擇器。name可以隨便起葵礼。from后面的大括號(hào)描述某個(gè)動(dòng)畫開(kāi)始是怎么樣的粗梭，to后面描述結(jié)束是怎么樣的艇纺。
比如
@keyframes myframes {
from {
height: 200px;
background: orange;
}
to {
height: 480px;
background: pink;
}
}
更高級(jí)點(diǎn)的寫法是把from和to換成0%和100%
@keyframes myframes {
0% {
height: 200px
}
100% {
height: 600px
background: orange
}
}
這樣做的好處是盾碗，你可以盡情添加更多的keyframe百分比媚污，描述更細(xì)致的動(dòng)畫效果,甚至不需要按照0-100的順序來(lái)寫，比如下面的寫法也是可以的：
@keyframes myframes {
0% {
height: 200px
}
30%, 100% {
width: 400px
}
70% {
height: 600px
background: orange
}
}
2 Animation
有了keyframes廷雅，就可以在animation中使用它們來(lái)給元素添加動(dòng)畫耗美。
2.1 語(yǔ)法
.element {
animation: [name][duration][timeing-function][delay][iteration-count][direction][fill-mode][play-state];
}
animation是需要放在css選擇器中的，屬性中的第一個(gè)name就是需要跟keyframes的name相呼應(yīng)的航缀。比如下面的縮寫方式：
.element {
animation: myframes 2s ease-in 0s infinite normal forwards paused;
}
2.2 animation屬性詳解
要徹底掌握animation幽歼，需要逐項(xiàng)弄清楚這些屬性究竟是什么意思：
animation-name: myframes
animation-duration: 2s
animation-delay: 0s
animation-timeing-function: ease-in-out
animation-iteration-count: infinite
animation-direaction: normal
animation-fill-mode: forwards
animation-play-state: running
animation-delay是我們需要等多久能看到動(dòng)畫開(kāi)始，而不是每次動(dòng)畫之間的間隔谬盐。如果想要控制每次動(dòng)畫的間隔，需要寫在keyframe的百分比中間诚些。animation-direction可以是正常的normal飞傀，也可以是reverse，就是倒著來(lái)從100%到0%诬烹，可以配合animation-iteration-count比如count：3砸烦，就倒著執(zhí)行3次。還可以是alternate绞吁，正著1次幢痘，倒著1次，正著1次家破，這樣算3次颜说。animation-fill-mode非常有用购岗！它會(huì)控制動(dòng)畫結(jié)束之后這個(gè)元素的停止?fàn)顟B(tài)。normal就是最正常的反回最初的狀態(tài)门粪，而forwards則會(huì)讓元素停在動(dòng)畫結(jié)束的最后1幀的狀態(tài)喊积。我經(jīng)常使用fowards這個(gè)參數(shù)讓元素停止在動(dòng)畫結(jié)束的狀態(tài)。animation-play-state可以是running或者是paused玄妈，paused可以在任何時(shí)間點(diǎn)暫停動(dòng)畫乾吻，配合js使用。
2.3 如何觸發(fā)animation動(dòng)畫
- hover偽類
- class改變
- 增加新元素
2.4 示例應(yīng)用
- 1
查看我的codepen代碼
像這樣一個(gè)通知小動(dòng)畫拟蜻，當(dāng)某個(gè)元素被hover的時(shí)候绎签，出現(xiàn)一個(gè)小通知，告知用戶有幾個(gè)新評(píng)論幾個(gè)新的點(diǎn)贊酝锅。
實(shí)現(xiàn)方法是先寫好一個(gè)自定義的keyframes（用Sass诡必，所以沒(méi)寫花括號(hào)和分號(hào)）
@keyframes note
0%
opacity: 0
transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg)
50%
transform: rotate(-10deg) rotateX(-2deg)
opacity: 1
70%
transform: rotate(3deg)
100%
transform: scale(1)
先將通知元素隱藏，display: none屈张。當(dāng)元素被hover的時(shí)候擒权，display: flex(或者block，這里用flex是因?yàn)橥ㄖ貎?nèi)部的布局需要)阁谆，并且執(zhí)行 animation: note 800ms ease-in-out forwards , fowards是為了讓動(dòng)畫執(zhí)行完停止在最后一幀而不是消失碳抄，note就是自定義的keyframes。
- 2
第二個(gè)示例是當(dāng)導(dǎo)航變化的時(shí)候场绿，四種list-view出現(xiàn)的動(dòng)畫效果：
觸發(fā)動(dòng)畫的方式是添加class剖效。給點(diǎn)擊的導(dǎo)航添加一個(gè).active的class。
這個(gè)動(dòng)畫的重點(diǎn)是如何實(shí)現(xiàn)每個(gè)item漸次出現(xiàn)的效果焰盗，秘訣就是要給每個(gè)item添加不一樣的animation-delay：
如果你也用Sass寫css的話璧尸，只要寫個(gè)for循環(huán)，就能非常容易的實(shí)現(xiàn)：
.menu-3
li
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu3
duration: 300ms
timeing-function: ease-in-out
fill-mode: forwards
//這里的delay就是漸次效果的關(guān)鍵
delay: 100ms * $i - 100
不用sass熬拒，直接寫css也是可以的爷光，可以查看源碼中css編譯之后的結(jié)果。
如果覺(jué)得有用澎粟，請(qǐng)給我點(diǎn)個(gè)贊吧(? ??_??)?!
