一、過渡動畫
過渡(transition)動畫,就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。
所謂的狀態就是指大小、位置、顏色、變形(transform)等等這些屬性。
Note:不是所有屬性都能過渡,只有屬性具有一個中間點值才具備過渡效果。
點擊查看完整列表。
css過渡只能定義首和尾兩個狀態,所以是最簡單的一種動畫。
注釋:Internet Explorer 9 以及更早版本的IE瀏覽器不支持 transition 屬性。
如何在項目中正確、熟練地應用transition動畫?
第一步:在目標元素的樣式聲明中定義元素的初始狀態,然后在同一聲明中用 transition 屬性配置動畫的各種參數。
可定義的參數有:
- transition-property:規定對哪個屬性進行過渡。
- transition-duration:定義過渡的時間,默認是0。
- transition-timing-function:定義過渡動畫的緩動效果,如淡入、淡出等。
- linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。
- ease(默認值)規定慢速開始,然后變快,然后慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
- ease-in 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
- ease-out 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
- ease-in-out 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
- transition-delay:規定過渡效果的延遲時間,即在過了這個時間后才開始動畫,默認是0。
注意:要在同一代碼塊中定義元素初始狀態(樣式),添加transition屬性。
如果想要同時過渡多個屬性,可以用逗號隔開。

第二步:改變元素的狀態。
為目標元素添加偽類或添加聲明了最終狀態的類。
使用 transtion 屬性只是規定了要如何去過渡,要想讓動畫發生,還得要有元素狀態的改變。如何改變元素狀態呢,當然就是在css中給這個元素定義一個類(:hover等偽類也可以),這個類描述的是過渡動畫結束時元素的狀態。
除了使用hover等系統提供的偽類外,我們也可以隨意的定義自己的類,然后想要過渡時就通過js把類加到元素上面。
注意:單純的代碼不會觸發任何過渡操作,需要通過用戶的行為(如點擊,懸浮等)觸發。可觸發的方式有::hover :focus :checked 媒體查詢觸發 JavaScript觸發。
示例1:

示例2:
當鼠標懸停在img元素上時,改變img元素的尺寸。改變的整個過程是平滑過渡的,不是快速、突兀的。
img { height:15px; /*初始值*/ width:15px; transition:1s1s height; /*過渡*/ } img:hover { height:450px; /*最終值*/ width:450px; }
過渡動畫的局限性
transition的優點在於簡單易用,但是它有幾個很大的局限。
(1)transition需要事件觸發,所以沒法在網頁加載時自動發生。
(2)transition是一次性的,不能重復發生,除非一再觸發。
(3)transition只能定義開始狀態和結束狀態,不能定義中間狀態,也就是說只有兩個狀態。
二、關鍵幀動畫
不同於過渡動畫只能定義首尾兩個狀態,關鍵幀動畫可以定義多個狀態,或者用關鍵幀的話來說,過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀,而關鍵幀動畫則可以定義任意多的關鍵幀,因而能實現更復雜的動畫效果。
注釋:Internet Explorer 9 以及更早的IE版本不支持 animation 屬性。
如何在項目中正確、熟練地應用animation動畫?
animation就相當於用@keyframes預先定義好元素在整個過渡過程中將要經歷的各個狀態,然后再通過animation屬性將這些狀態一次性賦給該元素。
第一步:通過類似Flash動畫中的幀來聲明一個動畫。
關鍵幀動畫的定義方式也比較特殊,它使用了一個關鍵字 @keyframes 來定義動畫。具體格式為:
@keyframes 動畫名稱 { 時間點 {元素狀態} 時間點 {元素狀態} …}
一般來說,0%和100%這兩個關鍵幀是必須要定義的。0%可以由from代替,100%可以由to代替。
第二步:在目標元素的樣式聲明中使用animation屬性調用關鍵幀聲明的動畫。
現在我們知道了怎么去定義一個關鍵幀動畫了,那怎么去實現這個動畫呢?其實很簡單,只要把這個動畫綁定到某個要進行動畫的元素上就行了。把動畫綁定到元素上,我們可以使用animation屬性。
可配置的參數有:
- animation-name:none為默認值,將沒有任何動畫效果,其可以用來覆蓋任何動畫。
- animation-duration:默認值為0s,意味着動畫周期為0s,也就是沒有任何動畫效果。
- animation-timing-function:與transition-timing-function一樣。
- animation-delay:在開始執行動畫時需要等待的時間。
- animation-iteration-count:定義動畫的播放次數,默認為1,如果為infinite,則無限次循環播放。
- animation-direction:默認為nomal,每次循環都是向前播放,(0-100)。另一個值為alternate,動畫播放為偶數次則向前播放,如果為基數詞就反方向播放。
- animation-state:默認為running,播放,paused,暫停。
- animation-fill-mode:定義動畫開始之前和結束之后發生的操作。
- none(默認值),動畫結束時回到動畫沒開始時的狀態;
- forwards,動畫結束后繼續應用最后關鍵幀的位置,即保存在結束狀態;
- backwards,讓動畫回到第一幀的狀態;
- both:輪流應用forwards和backwards規則;
注意:只要把定義好的動畫綁定到元素上,就能實現關鍵幀動畫了,而不是像第一種過渡動畫那樣,需要一個狀態的改變才能觸發動畫。
animation屬性到目前為止得到了大多數瀏覽器的支持,但是,需要添加瀏覽器前綴!另外,@keyframes必須要加webkit前綴。
示例:
div:hover { -webkit-animation:1s changeColor; /*調用動畫*/ animation:1s changeColor; } @-webkit-keyframes changeColor { /*聲明動畫*/ 0% {background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } @keyframes changeColor { 0%{background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} }
過渡動畫與關鍵幀動畫的區別
animation屬性類似於transition,他們都是隨着時間變化而改變元素的屬性值,其主要區別在於:transition需要觸發一個事件才會隨着時間改變其CSS屬性;animation在不需要觸發任何事件的情況下,也可以顯式的隨時間變化來改變元素CSS屬性,達到一種動畫的效果。
三、animate.css動畫庫
animate.css是一個css3動畫庫,可以到github上去下載,里面預設了很多種常用的動畫,使用也很簡單,因為它是把不同的動畫綁定到了不同的類里,所以我們想要使用哪種動畫的時候,只需要簡單的把那個相應的類添加到元素上就行了。
該庫大致包含如下這些動畫效果:
- bounce(跳動)、flash(閃光)、pulse(脈沖)、rubber band(橡皮筋)、shake(抖動)、swing(搖擺)、wobble(搖擺不定)
- fade(淡入或淡出)
- flip(翻轉)
- rotate(旋轉)
- slide(滑動)
- zoom(放大或縮小)
如何在項目中正確、熟練地應用animate動畫庫?
(1):在head中引入animate.min.css文件。
注:由於animate.min.css默認包含所有的動畫效果。因此當我們僅使用其中的幾個動畫效果時,我們最好使用gulp構建僅包含我們需求的animate.min.css,這樣可以避免我們引入的animate.min.css文件體積過大。
如何使用gulp構建符合我們需求的animate.min.css?
第一步:將整個animate.css項目下載下來,作為生產環境的依賴:
npm install animate.css --save
第二步:進入animate.css項目根目錄下:
$cd path/to/animate.css/
第三步:加載dev依賴:
npm install
第四步:根據實際需要修改animate-config.json文件:
例如:我們只需要這兩個動畫效果:bounceIn和bounceOut。
{
"bouncing_entrances": [ "bounceIn" ], "bouncing_exits": [ "bounceOut" ] }
最后一步:進入animate.css項目下,運行gulp任務:gulp default,生成新的animate.min.css覆蓋默認的animate.min.css。
(2)你想要哪個元素進行動畫,就給那個元素添加上animated類 以及特定的動畫類名,animated是每個要進行動畫的元素都必須要添加的類。

你也可以在動畫完成后,把動畫類移除,以便可以再次進行同一個動畫。

至於動畫的配置參數,比如動畫持續時間,動畫的執行次數等等,你可以在你的的元素上自行定義,覆蓋掉animate.min.css里面所定義的就行了。注意添加瀏覽器前綴。
