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

Aug 7, 2011 at 15:42:56

最近稍微玩了一下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);
}

下面给出几个实例并附上相关代码(猛击这里新窗口查看效果)：

Tags:

技术