CSS3中transition的使用

蚊子前端博客
发布于 2015-01-06 07:00
多年来,web前端开发人员一直在寻求通过html和css实现一些动画效果,而不再使用Javascript或Flash。现在因为CSS3的出现让我们的愿望成为了现实,这就是CSS3中的transition属性

transition初体验

我们先来看一个实例热热身,【狠狠点击这里>>

多年来,web前端开发人员一直在寻求通过html和css实现一些动画效果,而不再使用Javascript或Flash。现在因为CSS3的出现让我们的愿望成为了现实,这就是CSS3中的transition属性。

通过这个实例我们能够看到一个transition的简单的使用,鼠标放上去,链接变为红色,同时慢慢向右移动,鼠标离开后,链接再回到初始的状态。比我们之前的仅仅是颜色的变化好了很多,更有动感,给用户的体验更好。

transition的浏览器兼容性

因为transition是CSS3里才有的属性,所以你懂的,IE8及以下的IE浏览器均不支持,虽然IE9已经能够支持很多的CSS3属性了,可是transition还不支持。到目前为止,IE10+,firefox16+,chrome26+,Safari7+和opera15+等浏览器中可以支持transition的标准属性了,直接使用transition就可以了。

不过在IE10(PP3)、firefox4.0~15.0、chrome4.0~20.0、Safari3.1~6.0和opera·0.5~12.0里,使用transition还需要添加各浏览器的私有属性:-webkit-transition, -moz-transition, -o-transition等。

transition中的属性

transition里主要包括四个属性值:

  1. 过渡或CSS属性:可以是border, margin, padding, font, color, background,transform等

  2. 过渡需要的时间:以秒或毫秒为单位的数据,如1.0s, .4s(0.4s), 300ms等

  3. 指定的过渡函数:如linear, ease-in, ease-out等

  4. 过渡的延迟时间:以秒或毫秒为单位的数据,如1.0s, .4s(0.4s), 300ms等

以我们文章最开始的demo为例来进行讲解:

COPYCSS

a{ ransition: transform .4s linear; } a:hover{ transform: translateX(10px); }
transition 过渡属性 过渡时间 指定的过渡函数 过渡延迟时间
样例中 transform(过渡) .4s(即0.4s) linear(匀速过渡)

在上面的css代码里,a标签有一个transition过渡效果,然后我们还给出了过渡的最终效果:translateX(10px),即向右偏移10px。这个过渡效果是由a标签的hover效果触发的,经历0.4s,a标签的偏移量由0匀速的变为10px,离开后再匀速的回到0px.

transition更多的效果

很多时候我们不只是改变一个css效果,还想要改变更多的css属性效果。我们有两种方式可以使用:

1.transition能够同时声明多个属性过渡,如:

COPYCSS

.transition{ transition:background 2s linear, border 1.2s ease-in; }

2.分开书写:

COPYCSS

.transition{ transition-property: background, border; transition-duration: 2s, 1.2s; transition-timing-function: linear, ease-in; }

当然,这些过渡效果需要我们主动的来触发它们,否则它们自己是不会动的,比如我们使用hover,active,click等等。

当然,对于CSS3的transition还有很多的东西需要我们去挖掘!

阅读(595)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆