css3動畫整理

css3動畫主要經常使用的屬性有 變形（transform），轉換（transition），動畫（animation）三種。

變形（transform）主要有如下幾種方式：

旋轉rotate：rotate((<number>)   transform:rotate(20deg);

扭曲skew：skew(x,y)  transform:skew(30deg,10deg):

縮放scale:scale(x,y)  transform:scale(30deg,10deg):

移動translate :translate(x,y)  transform:translate(100px,0)

矩陣變形matrix:matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

 

改變元素的基點位置transform-origin:transform-origin(X,Y)  用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值能夠是百分值,em,px，其中X也能夠是字符參數值 left,center,right；Y和X同樣除了百分值外還能夠設置字符值top,center,bottom(transform-origin並非transform中的屬性值，他具備本身的語法)

transform語法：

transform: none|transform-functions;

例：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}

詳細屬性介紹：http://www.w3school.com.cn/cssref/pr_transform.asp

轉換（transition）：css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。」

transition主要包含四個屬性值：

執行變換的屬性：transition-property,

變換延續的時間：transition-duration,

變換的速率變化transition-timing-function,

變換延遲時間transition-delay。

語法：

transition: property duration timing-function delay;

例：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

.div1{ width: 100px; -webkit-transition:-webkit-transform 1s 2s;
　　 -ms-transition:-ms-transform 1s 2s;
　　 -o-transition:-o-transform 1s 2s; transition:transform 1m 2s; -webkit-transform:translate(100px,0); -ms-transform:translate(100px,0);
　　 -o-transform:translate(100px,0); transform:translate(100px,0); }

詳細屬性介紹：http://www.w3school.com.cn/cssref/pr_transition.asp

 

動畫（animation）：CSS3的Animation是由「keyframes」這個屬性來實現效果的，"Keyframes",相似於「關鍵幀"，Keyframes具備其本身的語法規則，他的命名是由"@keyframes"開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」。

keyframes 案例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

或

@keyframes myfirst
{
0% {background: red;}
50% {background: yellow;}
100% {background: green;}
}

建立好動畫後使用時須要綁定到選擇器上，這樣纔會有效果，那下面就用到了animation：
例：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

 

animation主要包含如下幾個屬性：

用來定義一個動畫的名稱：animation-name，

指定元素播放動畫所持續的時間長：animation-duration，

動畫的播放方式：animation-timing-function，

　　播放方式有幾下幾種：

　　　　一、ease：（逐漸變慢）默認值

　　　　二、linear：（勻速）

　　　　三、ease-in：(加速)

　　　　四、ease-out：（減速）

　　　　五、ease-in-out：（加速而後減速）

　　　　六、cubic-bezier：（該值容許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，　　　　                不然無效。

指定元素動畫開始時間：animation-delay，

指定元素播放動畫的循環次數：animation-iteration-count，

指定元素動畫播放的方向：animation-direction，

　　參數有如下幾種：

　　　　一、normal： 默認值爲normal，每次循環都是向前播放

　　　　二、alternate：動畫播放在第偶數次向前播放，第奇數次向反方向播放

控制元素動畫的播放狀態：animation-play-state（注：這個屬性目前不多內核支持）

　　參數有如下幾種

　　　　一、running： 默認值   經過running將暫停的動畫從新播放

　　　　二、paused：經過paused將正在播放的動畫停下了　　　　

語法：

animation：name,duration,timing-function,delay,iteration-count,direction,play-state

  詳細屬性介紹：http://www.w3school.com.cn/css3/css3_animation.asp

 

shakeflashswingbouncetadawobblepulse

flipflipInXflipOutXflipInYflipOutY

fadeInfadeInUpfadeInDownfadeInLeftfadeInRightfadeInUpBigfadeInDownBigfadeInLeftBigfadeInRightBig

fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig

slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight

bounceInbounceInDownbounceInUpbounceInLeftbounceInRight

bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight

rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight

rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight

lightSpeedInlightSpeedOuthingerollInrollOut

 

 

 

參考：http://www.cnblogs.com/2050/p/3409129.html