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为例来进行讲解：

a{  
    ransition: transform .4s linear;  
}  
a:hover{  
    transform: translateX(10px);  
}  

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

transition更多的效果 #

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

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

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

2.分开书写：

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

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

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