總結CSS3新特性(Animation篇)

動畫(Animation),是CSS3的亮點.//之一

通過animation屬性指定@keyframe來完成關鍵幀動畫;

@keyframe用法:　　

@keyframes name {
  0% { top: 0; }/*0%可用from關鍵字替代*/
  50% { top: 10px; }
  100% { top: 0; }/*100%可用to關鍵字替代*/
}

由於是CSS3,所以不出意外的各種前綴:

--圖片來自MDN,CSS中的關鍵幀

單個幀中可填寫多個屬性,而且不需要保證一致,如:

@-webkit-keyframes identifier {
  from { top: 0; }
  50% { top: 10px;background-color:red; }
  to { top: 20px;color:red; } 
}/*這是一個完全有效的關鍵幀定義*/

需要注意的有幾點:

　　關鍵幀中有效的屬性為可動畫屬性;如出現不可動畫屬性,會忽略該屬性,不影響其余屬性的動畫,

　　如屬性后跟有 !important,則會忽略該屬性,

　　某個關鍵幀如果重復定義,則取后定義的幀,　　

@-webkit-keyframes identifier {
 from { top: 0; }
  50% {
    top: 10px; /*該屬性會動畫*/
    background-color:red !important; /*因為有!important字樣,所以該條將被忽略*/
    text-align:center; /*由於該屬性不為可動畫屬性,因此也被忽略*/
}
  to { top: 20px;color:red; } 
  100% {color:green; } /*由於to關鍵字表示100%,所以該動畫只會執行改變顏色為green,而to所對應的屬性全部被忽略*/
}

幀數范圍為0%-100%,不屬於這個范圍的則被忽略(經實驗,關鍵幀定義可以不按順序來,可以正確執行,但是可讀性不太好);

Animation用法:

animation-name:設置動畫的名稱,就是@keyframe后跟的標識;

animation-duration:設置動畫花費的時間,//這兩個為必填屬性,第一個不解釋了,第二個必填的原因為默認值是0s,0s是不會產生動畫效果的,所以為必填;

#demo {
    animation-name:demo;
    animation-duration:2s;
}
@keyframe demo {
    from {top:0;}
    to {top:20px;}
}

 

animation-timing-function:設置動畫的速度曲線,默認值為 ease,可選值有數個,可通過cubic-bezier函數來自定義,這里有一些定義好的,可以直接拿來用的函數,傳送陣;

#demo {
    animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定義的貝塞爾曲線*/
}

animation-delay:設置動畫開始前的等待時間,默認為0s;

#demo {
    animation-delay:2s;/*動畫將於2s后執行*/
}

animation-iteration-count:設置動畫執行次數,默認為1,使用 infinite 關鍵字可以使動畫無限循環;

#demo {
animation-iteration-count:infinite;/*動畫將無限循環,此時animation-fill-mode將無效*/
}

animation-direction:設置動畫執行完后時候倒序執行,默認為normal,使用 alternate 關鍵字開啟倒序執行

　　//僅有animation-iteration-count值為大於1次時才會激活,倒序執行消耗時間為animation-duration設置的時間,奇數次數為正序,偶數次數為倒序;

#demo {
animation-direction:alternate;/*激活倒序播放*/
animation-iteration-count:2;/*此時該屬性須大於1,direction才會有效*/
}

animation-play-state:設置動畫當前狀態,默認是 running ,為執行狀態,可以設置為 paused 為暫停,

#demo {
animation-play-state:paused;/*默認不觸發動畫*/
}
#demo:hover {
animation-play-state:running;/*懸浮至該元素才執行動畫*/
}

animation-fill-mode:設置動畫執行完后的狀態(復原(none),保持第一幀(backwards)以及保持最后一幀(forwards),還有一個both值 MDN說是同時backwards和forwards,原諒我沒有試出它與forwards的區別...,)

　　//設置animation-iteration-count值為infinite時將導致該屬性失效;

animation的簡寫方式對順序要求特別嚴格,規格如下:

animation:name duration timing-function delay iteration-count direction play-state fill-mode;

使用時需注意:

各種前綴...@keyframe里邊如果用到了transform,也是需要加前綴的,如:

@-webkit-keyframe demo {
    from {-webkit-transform:rotate(7deg);}  
    to {-webkit-transform:rotate(14deg);}  
}

部分參考文檔:

MDN的動畫

CSS3中的關鍵幀

W3School的Animation屬性

W3School的@Keyframe規則