transition是css3中新添加的,它表示过渡的意思,比如让容器透明秀由0到1,宽由100px到1000px等,不用写js代码就可以实现很好的动画效果,非常的方便.下面学习吧说下它的使用方法.

transition使用

它有四个属性,但它可以直接简写,分别为:

transition-property:all; //要执行过渡的属性,如: width
transition-duration:.5s; //执行过渡的时间, 单位为s 秒
transition-timing-function:ease-in; //执行过渡的类型
transition-delay:.1s; //延迟执行过渡的类型

上面是transition的拆分设置,当然可以写多个,多个属性之间以","英文逗号分隔,如 transition-property: width, height;等

但是我们可以使用它的简写,简写可提高我们的开发效率.

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay] ;
 执行过渡的属性(建议写) 执行过渡的时间(必须) 执行过渡的类型(可选) 延迟过渡的时间(可选)

其中直接写个transition-duration 就可以使用,如:transition: .5s;它默认就会认成:transition:all 0.5s ease 0s;其中的all是全部属性,而ease表示过渡的类型.但学习吧不建议采用all,这有损性能...我们可直接写上属性名如 transition: width .4s, height .5s;这样会在你不知觉之间提高了性能,当然这点性能可能微不足道.

transition-duration的几种类型

ease(逐渐变慢)
linear(匀速)
ease-in(加速)
ease-out(减速)
ease-in-out(先加速再减速)

transition的兼容性

IE10及以上都支持, 现在火狐,谷歌等快速内核浏览器都支持.但对于谷歌得写针对谷歌的写法.在前面加上:-webkit-如:

-webkit-transition: width .5s, height .10s;

发表于 2013年04月18日 16:15:35 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 16:15:35