I am houbiao beta 0.1

CSS3 transition 过渡动画

分类:CSS3

今天熟悉了下CSS3的transition属性,即过渡动画(非常类似于jQuery的animate属性)。有了这个属性之后,一些简单的过渡动画就无需jQuery之类的库了,直接在CSS里即可完成,废话不说,上示例,DEMO - CSS3 transition 过渡动画

代码的组成和参数也相对很简单明了,我们来详细看一下:-webkit-transition: property duration timing-function delay;这一句定义了在webkit浏览器下一个变换动画的4个属性(注:在Firefox浏览器下应使用-moz前缀,Opear下则使用-o前缀)。

property指定发生变化的属性,如果有多个属性的话可以用逗号分隔。

duration指定该动画执行过程所耗费的时间,如果之前的property设置了多个属性那么这里也要设置相应数量的时间,用逗号分隔,如果之前设置了2个以上的属性,但是这里只设置了一个时间的话,那么这个设置的时间就是最后一个属性的时间,其他的属性时间则为0。

timing-function用于定义动画的变化时间曲线,属性如下:cubic-bezier(x1, y1, x2, y2)X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。ease逐渐慢下来。ease-in加速(渐入)。ease-out减速(淡出)。ease-in-out加速然后减速。linear均速。

delay指定在变换开始之前的时间延迟,曾记得之前用jQuery实现的鼠标延时事件,虽结构也很简单,但绝对没有这个来的快,延时在很大程度上能变面一些不能预知的BUG,比如一个下拉菜单,鼠标放上下拉出来,鼠标离开收回,相信很多童鞋都玩过这个,鼠标反复放上,快速离开,又放上又离开,就会看到导航就像疯了一样自己在那来回下拉收起,但是有了延时就解决这个问题了,一般延时200毫秒就足以,意思就是说当用户的鼠标悬停在此200毫秒以后才执行下拉效果,避免了之前的情况发生。

应用到实际我们就可以这样来写-webkit-transition:color,border 0.5s,0.5s linear;意思是指该元素下的colorborder属性分别使用0.5秒的平滑过渡效果。当然以上的代码还可以分开写,于是就成了这样:-webkit-transition-property:color,border;-webkit-transition-duration:0.5s,0.5s;-webkit-transition-timing-function:linear;-webkit-transition-delay:0;

48580 reads 3 comments

上一篇:chrome 27.0 has removed desktop version of -webkit-text-size-adjust property

回复信息

xuedapan

不错,够简洁

adasdsad

dasda

Leave a comment

*