介绍几个CSS3新属性和动画效果

2011年8月7日 · 13 years ago

最近稍微玩了一下CSS几个有用的新特性,

主要是transition(过渡效果),translate(移动),transform(变形)以及animation(动画)。
几个新特性的叠加可以产生很强大的效果,而且比起写JS要方便得多,当然,目前只有webkit和mozilla以及难见踪影的IE10支持CSS3,webkit支持得最好,moz次之,IE杯具。所以目前CSS3的应用主要还是在iOS和android上会比较有前途,PC上就算了,玩玩就好了。稍微介绍一下这几个属性。
1.CSS3 Transitions 过渡效果
可以很方便地指定两种样式之间的切换过渡效果,比方说我们移动一个div的位置,从x = 0px 到 x = 200px,这时候使用transition指定缓动效果为ease-in-out,我们可以看到DIV移动时会减速。
.box:hover{
/* 这里的all是指适用在所有效果,如果想只适用width或者height,直接替换即可,多个效果用“,”隔开 */
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -o-transition: all 800ms;
    -ms-transition: all 800ms;
}

 

2.CSS3 Translate 移动元素
以前如果我们要写一个元素移动的动画,通常我们会设置某元素位置为absolute,然后通过JS改变其top,left,right,bottom等属性来实现动画,现在我们可以使用css3 translate来做到这一点,而完全不需要设置position为absolute。另外,这里提醒一下大家,使用css translate在android上相当杯具,而在iOS的mobile safari里面使用,则transalte2d的效果远远不如translate3d,所以,如果需要在mobile safari里面使用该属性,强烈建议使用translate3d(x,y,z)的形式,即使只是修改其中的X或者Y,也这样写。我测试过使用translateX或者translateY,效果跟2d的一样烂。
而translate3d是webkit才支持的属性,估计内部实现与2d不同,所以效果流畅很多。
.example:hover .translate{
/*这里示例的是2D的translate,参数为x,y,如果用3D则translate3d(x,y,z),但目前只有webkit支持3D*/
-moz-transform: translate(500px,0);
-webkit-transform: translate(500px,0);
-o-transform: translate(500px,0);
-ms-transform: translate(500px,0);
}
3.CSS3 transform 形变
CSS3提供了几个很有用的属性来改变元素的形状:缩放scale,旋转rotate,倾斜skew。(IE10+也支持,但是要加-ms-前缀。)
.rotate:hover{
-moz-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
}
下面给出几个实例并附上相关代码(猛击这里新窗口查看效果):