CSS3過(guò)渡動(dòng)畫(huà)&關(guān)鍵幀動(dòng)畫(huà)&animate.css動(dòng)畫(huà)庫(kù)詳解

本文并非原創(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à)效果

  1. bounce(跳動(dòng))膛腐、flash(閃光)睛约、pulse(脈沖)、rubber band(橡皮筋)哲身、shake(抖動(dòng))辩涝、swing(搖擺)、wobble(搖擺不定)
  2. fade(淡入或淡出)
  3. flip(翻轉(zhuǎn))
  4. rotate(旋轉(zhuǎn))
  5. slide(滑動(dòng))
  6. 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里面所定義的就行了。注意添加瀏覽器前綴欲诺。


參考資料1
參考資料2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末抄谐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子扰法,更是在濱河造成了極大的恐慌蛹含,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迹恐,死亡現(xiàn)場(chǎng)離奇詭異挣惰,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)殴边,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門憎茂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人锤岸,你說(shuō)我怎么就攤上這事竖幔。” “怎么了是偷?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵拳氢,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蛋铆,道長(zhǎng)馋评,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任刺啦,我火速辦了婚禮留特,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己蜕青,他們只是感情好苟蹈,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著右核,像睡著了一般慧脱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上贺喝,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天菱鸥,我揣著相機(jī)與錄音,去河邊找鬼搜变。 笑死采缚,一個(gè)胖子當(dāng)著我的面吹牛针炉,可吹牛的內(nèi)容都是我干的挠他。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼篡帕,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼殖侵!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起镰烧,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拢军,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后怔鳖,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體茉唉,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年结执,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了度陆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡献幔,死狀恐怖懂傀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蜡感,我是刑警寧澤蹬蚁,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站郑兴,受9級(jí)特大地震影響犀斋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜情连,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一叽粹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦球榆、人聲如沸朽肥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)衡招。三九已至,卻和暖如春每强,著一層夾襖步出監(jiān)牢的瞬間始腾,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工空执, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留浪箭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓辨绊,卻偏偏與公主長(zhǎng)得像奶栖,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子门坷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color宣鄙,font,text-align默蚌,li...
    love2013閱讀 2,314評(píng)論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color冻晤,font,text-align绸吸,li...
    wzhiq896閱讀 1,747評(píng)論 0 2
  • 過(guò)渡動(dòng)畫(huà) 第一種叫過(guò)渡(transition)動(dòng)畫(huà)鼻弧,就是從初始狀態(tài)過(guò)渡到結(jié)束狀態(tài)這個(gè)過(guò)程中所產(chǎn)生的動(dòng)畫(huà)。所謂的狀態(tài)...
    caikunhai閱讀 552評(píng)論 0 0
  • 看了很多視頻锦茁、文章攘轩,最后卻通通忘記了,別人的知識(shí)依舊是別人的蜻势,自己卻什么都沒(méi)獲得撑刺。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,861評(píng)論 0 4
  • 不管你如何努力想要保持年輕的容顏握玛,還是阻擋不了歲月催人的腳步够傍!昂貴的護(hù)膚品,天天一張面膜挠铲,按時(shí)按點(diǎn)睡覺(jué)冕屯,...
    若水瓢蟲(chóng)閱讀 187評(píng)論 0 1