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，

　　播放方式有幾下幾種：

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

　　　　2、linear：（勻速）

　　　　3、ease-in：(加速)

　　　　4、ease-out：（減速）

　　　　5、ease-in-out：（加速然后減速）

　　　　6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，　　　　??????????????? 否則無效。

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

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

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

　　參數有以下幾種：

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

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

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

　　參數有以下幾種

　　　　1、running： 默認值?? 通過running將暫停的動畫重新播放

　　　　2、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

轉載于:https://www.cnblogs.com/lssmd/p/4413824.html

總結

以上是生活随笔為你收集整理的css3动画整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。