css3过渡属性transition

  • A+
所属分类:好文分享

css3与之前的css最大的一个区别就是:创建很多新的css属性来完成以前只有javascript才能完成或不能完成的动画,比如我们今天说的这个transition过渡属性,我的这个博客中就有应用。在web前端开发栏目中,有三个二级栏目,分别是html5、css3和javascript,鼠标滑过其中一个的时候,他会以Z轴为中心旋转360度,但是旋转的时候并不是在瞬间发生的,整个过程用了1s的时间,这个时间就是在transition过渡属性中进行设置。

transiton主要有以下几个属性:

比如下面这个效果:原来的div是宽高都是100px,并且背景是红色,鼠标滑过之后,变成宽1000px,高100px,背景还是红色。

目前各个版本的旧浏览器还不能完全支持所有的css3属性,所以需要写上向下兼容的代码!

avatar