本文并非原創(chuàng),屬于摘抄性質(zhì)吐葱,并有個(gè)人的加工街望。
一、過(guò)渡動(dòng)畫(huà)
過(guò)渡(transition)動(dòng)畫(huà)弟跑,就是從初始狀態(tài)過(guò)渡到結(jié)束狀態(tài)這個(gè)過(guò)程中所產(chǎn)生的動(dòng)畫(huà)灾前。
所謂的狀態(tài)就是指大小、位置孟辑、顏色哎甲、變形(transform)等等這些屬性。
Note:不是所有屬性都能過(guò)渡饲嗽,只有屬性具有一個(gè)中間點(diǎn)值才具備過(guò)渡效果炭玫。
點(diǎn)擊查看完整列表。
css過(guò)渡只能定義首和尾兩個(gè)狀態(tài)喝噪,所以是最簡(jiǎn)單的一種動(dòng)畫(huà)础嫡。
注釋:Internet Explorer 9 以及更早版本的IE瀏覽器不支持 transition 屬性指么。
如何在項(xiàng)目中正確酝惧、熟練地應(yīng)用transition動(dòng)畫(huà)?
第一步:在目標(biāo)元素的樣式聲明中定義元素的初始狀態(tài)伯诬,然后在同一聲明中用 transition 屬性配置動(dòng)畫(huà)的各種參數(shù)晚唇。
可定義的參數(shù)有:
- transition-property:規(guī)定對(duì)哪個(gè)屬性進(jìn)行過(guò)渡。
- transition-duration:定義過(guò)渡的時(shí)間盗似,默認(rèn)是0哩陕。
- transition-timing-function:定義過(guò)渡動(dòng)畫(huà)的緩動(dòng)效果,如淡入、淡出等悍及。
- linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,1,1))闽瓢。
- ease(默認(rèn)值)規(guī)定慢速開(kāi)始,然后變快心赶,然后慢速結(jié)束的過(guò)渡效果(cubic-bezier(0.25,0.1,0.25,1))扣讼。
- ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果(等于 cubic-bezier(0.42,0,1,1))。
- ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果(等于 cubic-bezier(0,0,0.58,1))缨叫。
- ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))椭符。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值〕芾眩可能的值是 0 至 1 之間的數(shù)值销钝。
- transition-delay:規(guī)定過(guò)渡效果的延遲時(shí)間,即在過(guò)了這個(gè)時(shí)間后才開(kāi)始動(dòng)畫(huà)琐簇,默認(rèn)是0蒸健。
注意:要在同一代碼塊中定義元素初始狀態(tài)(樣式),添加transition屬性婉商。
如果想要同時(shí)過(guò)渡多個(gè)屬性纵装,可以用逗號(hào)隔開(kāi)。
第二步:改變?cè)氐臓顟B(tài)据某。
為目標(biāo)元素添加偽類或添加聲明了最終狀態(tài)的類橡娄。
使用 transtion 屬性只是規(guī)定了要如何去過(guò)渡,要想讓動(dòng)畫(huà)發(fā)生癣籽,還得要有元素狀態(tài)的改變挽唉。如何改變?cè)貭顟B(tài)呢,當(dāng)然就是在css中給這個(gè)元素定義一個(gè)類(:hover等偽類也可以)筷狼,這個(gè)類描述的是過(guò)渡動(dòng)畫(huà)結(jié)束時(shí)元素的狀態(tài)瓶籽。
除了使用hover等系統(tǒng)提供的偽類外,我們也可以隨意的定義自己的類埂材,然后想要過(guò)渡時(shí)就通過(guò)js把類加到元素上面塑顺。
注意:?jiǎn)渭兊拇a不會(huì)觸發(fā)任何過(guò)渡操作,需要通過(guò)用戶的行為(如點(diǎn)擊俏险,懸浮等)觸發(fā)严拒。可觸發(fā)的方式有::hover :focus :checked 媒體查詢觸發(fā) JavaScript觸發(fā)竖独。
示例1:
示例2:
當(dāng)鼠標(biāo)懸停在img元素上時(shí)莹痢,改變img元素的尺寸诫硕。改變的整個(gè)過(guò)程是平滑過(guò)渡的滔吠,不是快速翰舌、突兀的。
img {
height:15px; /*初始值*/
width:15px;
transition:1s1s height; /*過(guò)渡*/
}
img:hover {
height:450px; /*最終值*/
width:450px;
}
過(guò)渡動(dòng)畫(huà)的局限性
transition的優(yōu)點(diǎn)在于簡(jiǎn)單易用喜德,但是它有幾個(gè)很大的局限。
(1)transition需要事件觸發(fā),所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。
(2)transition是一次性的沫屡,不能重復(fù)發(fā)生,除非一再觸發(fā)。
(3)transition只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài),不能定義中間狀態(tài)紊婉,也就是說(shuō)只有兩個(gè)狀態(tài)。
二、關(guān)鍵幀動(dòng)畫(huà)
不同于過(guò)渡動(dòng)畫(huà)只能定義首尾兩個(gè)狀態(tài),關(guān)鍵幀動(dòng)畫(huà)可以定義多個(gè)狀態(tài)勃刨,或者用關(guān)鍵幀的話來(lái)說(shuō),過(guò)渡動(dòng)畫(huà)只能定義第一幀和最后一幀這兩個(gè)關(guān)鍵幀股淡,而關(guān)鍵幀動(dòng)畫(huà)則可以定義任意多的關(guān)鍵幀身隐,因而能實(shí)現(xiàn)更復(fù)雜的動(dòng)畫(huà)效果。
注釋:Internet Explorer 9 以及更早的IE版本不支持 animation 屬性唯灵。
如何在項(xiàng)目中正確贾铝、熟練地應(yīng)用animation動(dòng)畫(huà)?
animation就相當(dāng)于用@keyframes預(yù)先定義好元素在整個(gè)過(guò)渡過(guò)程中將要經(jīng)歷的各個(gè)狀態(tài)埠帕,然后再通過(guò)animation屬性將這些狀態(tài)一次性賦給該元素垢揩。
第一步:通過(guò)類似Flash動(dòng)畫(huà)中的幀來(lái)聲明一個(gè)動(dòng)畫(huà)。
關(guān)鍵幀動(dòng)畫(huà)的定義方式也比較特殊敛瓷,它使用了一個(gè)關(guān)鍵字 @keyframes 來(lái)定義動(dòng)畫(huà)叁巨。具體格式為:
@keyframes 動(dòng)畫(huà)名稱 { 時(shí)間點(diǎn) {元素狀態(tài)} 時(shí)間點(diǎn) {元素狀態(tài)} …}
一般來(lái)說(shuō),0%和100%這兩個(gè)關(guān)鍵幀是必須要定義的呐籽。0%可以由from代替锋勺,100%可以由to代替蚀瘸。
第二步:在目標(biāo)元素的樣式聲明中使用animation屬性調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)。
現(xiàn)在我們知道了怎么去定義一個(gè)關(guān)鍵幀動(dòng)畫(huà)了庶橱,那怎么去實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)呢贮勃?其實(shí)很簡(jiǎn)單,只要把這個(gè)動(dòng)畫(huà)綁定到某個(gè)要進(jìn)行動(dòng)畫(huà)的元素上就行了苏章。把動(dòng)畫(huà)綁定到元素上寂嘉,我們可以使用animation屬性。
可配置的參數(shù)有:
- animation-name:none為默認(rèn)值枫绅,將沒(méi)有任何動(dòng)畫(huà)效果泉孩,其可以用來(lái)覆蓋任何動(dòng)畫(huà)。
- animation-duration:默認(rèn)值為0s并淋,意味著動(dòng)畫(huà)周期為0s寓搬,也就是沒(méi)有任何動(dòng)畫(huà)效果。
- animation-timing-function:與transition-timing-function一樣预伺。
- animation-delay:在開(kāi)始執(zhí)行動(dòng)畫(huà)時(shí)需要等待的時(shí)間订咸。
- animation-iteration-count:定義動(dòng)畫(huà)的播放次數(shù),默認(rèn)為1酬诀,如果為infinite脏嚷,則無(wú)限次循環(huán)播放。
- animation-direction:默認(rèn)為nomal瞒御,每次循環(huán)都是向前播放父叙,(0-100)。另一個(gè)值為alternate肴裙,動(dòng)畫(huà)播放為偶數(shù)次則向前播放趾唱,如果為基數(shù)詞就反方向播放。
- animation-state:默認(rèn)為running蜻懦,播放甜癞,paused,暫停宛乃。
- animation-fill-mode:定義動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后發(fā)生的操作悠咱。
- none(默認(rèn)值),動(dòng)畫(huà)結(jié)束時(shí)回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài)征炼;
- forwards析既,動(dòng)畫(huà)結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置,即保存在結(jié)束狀態(tài)谆奥;
- backwards眼坏,讓動(dòng)畫(huà)回到第一幀的狀態(tài);
- both:輪流應(yīng)用forwards和backwards規(guī)則酸些;
注意:只要把定義好的動(dòng)畫(huà)綁定到元素上宰译,就能實(shí)現(xiàn)關(guān)鍵幀動(dòng)畫(huà)了檐蚜,而不是像第一種過(guò)渡動(dòng)畫(huà)那樣,需要一個(gè)狀態(tài)的改變才能觸發(fā)動(dòng)畫(huà)囤屹。
animation屬性到目前為止得到了大多數(shù)瀏覽器的支持熬甚,但是逢渔,需要添加瀏覽器前綴肋坚!另外,@keyframes必須要加webkit前綴肃廓。
示例:
div:hover {
-webkit-animation:1s changeColor; /*調(diào)用動(dòng)畫(huà)*/
animation:1s changeColor;
}
@-webkit-keyframes changeColor { /*聲明動(dòng)畫(huà)*/
0% {background:#c00;}
50%{background:orange;}
100%{background:yellowgreen;}
}
@keyframes changeColor {
0%{background:#c00;}
50%{background:orange;}
100%{background:yellowgreen;}
}
過(guò)渡動(dòng)畫(huà)與關(guān)鍵幀動(dòng)畫(huà)的區(qū)別
animation屬性類似于transition智厌,他們都是隨著時(shí)間變化而改變?cè)氐膶傩灾担渲饕獏^(qū)別在于:transition需要觸發(fā)一個(gè)事件才會(huì)隨著時(shí)間改變其CSS屬性盲赊;animation在不需要觸發(fā)任何事件的情況下铣鹏,也可以顯式的隨時(shí)間變化來(lái)改變?cè)谻SS屬性,達(dá)到一種動(dòng)畫(huà)的效果哀蘑。
三诚卸、animate.css動(dòng)畫(huà)庫(kù)
animate.css是一個(gè)css3動(dòng)畫(huà)庫(kù),可以到github上去下載绘迁,里面預(yù)設(shè)了很多種常用的動(dòng)畫(huà)合溺,使用也很簡(jiǎn)單,因?yàn)樗前巡煌膭?dòng)畫(huà)綁定到了不同的類里缀台,所以我們想要使用哪種動(dòng)畫(huà)的時(shí)候棠赛,只需要簡(jiǎn)單的把那個(gè)相應(yīng)的類添加到元素上就行了。
該庫(kù)大致包含如下這些動(dòng)畫(huà)效果:
- bounce(跳動(dòng))膛腐、flash(閃光)睛约、pulse(脈沖)、rubber band(橡皮筋)哲身、shake(抖動(dòng))辩涝、swing(搖擺)、wobble(搖擺不定)
- fade(淡入或淡出)
- flip(翻轉(zhuǎn))
- rotate(旋轉(zhuǎn))
- slide(滑動(dòng))
- zoom(放大或縮锌碧臁)
如何在項(xiàng)目中正確怔揩、熟練地應(yīng)用animate動(dòng)畫(huà)庫(kù)?
(1):在head中引入animate.min.css文件误辑。
注:由于animate.min.css默認(rèn)包含所有的動(dòng)畫(huà)效果沧踏。因此當(dāng)我們僅使用其中的幾個(gè)動(dòng)畫(huà)效果時(shí),我們最好使用gulp構(gòu)建僅包含我們需求的animate.min.css巾钉,這樣可以避免我們引入的animate.min.css文件體積過(guò)大翘狱。
如何使用gulp構(gòu)建符合我們需求的animate.min.css?
第一步:將整個(gè)animate.css項(xiàng)目下載下來(lái)砰苍,作為生產(chǎn)環(huán)境的依賴:
npm install animate.css --save
第二步:進(jìn)入animate.css項(xiàng)目根目錄下:
$cd path/to/animate.css/
第三步:加載dev依賴:
npm install
第四步:根據(jù)實(shí)際需要修改animate-config.json文件:
例如:我們只需要這兩個(gè)動(dòng)畫(huà)效果:bounceIn和bounceOut潦匈。
{
"bouncing_entrances": [
"bounceIn"
],
"bouncing_exits": [
"bounceOut"
]
}
最后一步:進(jìn)入animate.css項(xiàng)目下阱高,運(yùn)行g(shù)ulp任務(wù):gulp default,生成新的animate.min.css覆蓋默認(rèn)的animate.min.css茬缩。
(2)你想要哪個(gè)元素進(jìn)行動(dòng)畫(huà)赤惊,就給那個(gè)元素添加上animated類 以及特定的動(dòng)畫(huà)類名,animated是每個(gè)要進(jìn)行動(dòng)畫(huà)的元素都必須要添加的類凰锡。
你也可以在動(dòng)畫(huà)完成后未舟,把動(dòng)畫(huà)類移除,以便可以再次進(jìn)行同一個(gè)動(dòng)畫(huà)掂为。
至于動(dòng)畫(huà)的配置參數(shù)裕膀,比如動(dòng)畫(huà)持續(xù)時(shí)間,動(dòng)畫(huà)的執(zhí)行次數(shù)等等勇哗,你可以在你的的元素上自行定義昼扛,覆蓋掉animate.min.css里面所定義的就行了。注意添加瀏覽器前綴欲诺。