總結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規則