css3實現(xiàn)動畫的好處有哪些

第css3實現(xiàn)動畫的好處有哪些CSS3動畫的屬性總的來說只有transform(變形)，transition(過渡)，和animation(動畫)這三種。

transition:1s(過渡的動畫效果)：從一個人具體的值到另一個過渡的值

transform:rotate(300deg)x,y旋轉(zhuǎn)transform:rotageX(300deg)transform:rotageY(300deg)

transform:scale(0.5,2)縮放x軸，y軸1放大1縮小

transform:translateX(100px)平移x軸transform:translateY(100px)平移y軸

transform:translate(100px100px)平移x,y軸

transition:rotate(300deg)scale(0.5,2)一邊縮放，一邊旋轉(zhuǎn)

transition:transform1s指定對transform起效果

transition:margin1s指定對margin起效果接改變大小和位置，顯示改變的結(jié)構(gòu)，沒有過渡和形變時間

animation重點是在時間軸和關(guān)鍵幀,是在于創(chuàng)建幀，讓不同幀在不同的時間節(jié)點發(fā)生不同變化，基于animation和@keyframe的動畫一方面也是為了實現(xiàn)表現(xiàn)與行為的分離

小例子

!DOCTYPEhtml

html

head

metacharset=UTF-8

title逐幀動畫/title

styletype=text/css

width:1000px;

height:400px;

background:#bbb;

position:relative;

margin:100pxauto;

overflow:hidden;

font-size:50px;

width:400px;

height:150px;

position:absolute;

top:-150px;

left:50px;

text-align:center;

background:#aaa;

line-height:150px;

animation:s2sinfinite;

font-size:50px;

width:400px;

height:150px;

position:absolute;

bottom:-150px;

right:50px;

background:#ccc;

line-height:150px;

animation:ss2sinfinite;

@keyframesss{

transform:translateY(0px);

background:#888;

50%{

transform:translateY(-90px);

background:#7dd;

50%{

transform:translateY(-150px);

background:#3aa;

@keyframess{

transform:translateY(0px);

background:#888;

50%{

transform:translateY(90px);

background:#7dd;

50%{

transform:translateY(150px);

background:#3aa;

/style

/head

body

header

div

div啦啦啦啦啦啦啦啦/div

div啦啦啦啦啦啦啦啦/div

/div

/header

/body

/html

使用css3實現(xiàn)動畫的好處

1、瀏覽器可以對動畫進行優(yōu)化（元素不可見時不動畫，減少對FPS的影響）

2、實現(xiàn)代碼比較簡單

3、可以利用硬件加速