css3实现动画的好处有哪些

第css3实现动画的好处有哪些CSS3动画的属性总的来说只有transform(变形)，transition(过渡)，和animation(动画)这三种。

transition:1s(过渡的动画效果)：从一个人具体的值到另一个过渡的值

transform:rotate(300deg)x,y旋转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)一边缩放，一边旋转

transition:transform1s指定对transform起效果

transition:margin1s指定对margin起效果接改变大小和位置，显示改变的结构，没有过渡和形变时间

animation重点是在时间轴和关键帧,是在于创建帧，让不同帧在不同的时间节点发生不同变化，基于animation和@keyframe的动画一方面也是为了实现表现与行为的分离

小例子

!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实现动画的好处

1、浏览器可以对动画进行优化（元素不可见时不动画，减少对FPS的影响）

2、实现代码比较简单

3、可以利用硬件加速