CSS3 中使用 transition 实现动画效果的方法？

在 css3 中，我们常常通过定义不同的属性来实现不同的效果，但很多时候，我们并不希望属性立即生效，而是希望这个变化持续一段时间。那么问题来了，这个持续时间怎么实现？这个时候 css3 的过渡就可以派上用场了。

何为 css3 的过渡呢？顾名思义，CSS 过渡（ transition ）是用来控制 CSS 属性的变化速率，让属性定义后的效果按一个曲线速率变化，类似 css3 中的动画效果，但是实现起来要简便得多。过渡是作用在某个 CSS 属性上，而动画是作用在某个动画规则上。

我们通过一个例子，来看看过渡的使用吧，代码如下：

有兴趣的朋友，可以将上述代码放在你的代码中，看看具体效果。但需要提醒大家的就是，要实现过渡，必须规定以下两点：

1、指定你想实现的效果对应的 css 属性；

2、指定效果时长

过渡属性

在 transition 的使用中，我们需要简写属性或其对应的具体属性来决定哪些属性发生动画效果 (明确地列出这些属性 transition-property )，何时开始 (设置 transition-delay ), 持续多久 (设置 transition-duration ) 以及如何动画 (定义 transition-timing-function 函数，比如匀速地或先快后慢)，下面分别来看看。

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

transition-property: none; /* 没有过渡效果 */

transition-property: width; /* 宽度变化将获得过渡效果 */

transition-property: all; /* 所有属性变化将获得过渡效果 */

transition-property: width, height; /* 宽度和高度变化将获得过渡效果 */

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-duration: 2s;/* 等价于 2000ms */

transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。

这部分类似 CSS3 动画中的 animation-timing-function 属性 ，不多赘述。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

transition-delay

transition-delay 属性规定过渡效果何时开始（以秒或毫秒计，允许负值）。

transition-delay: 2s;

transition

上述具体属性的简写属性。

transition: property duration timing-function delay;

示例：

div {

width: 100px;

transition: width 1s linear 2s;

/* Firefox */

-moz-transition:width 1s linear 2s;

/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;

/* Opera */

-o-transition:width 1s linear 2s;

}

div:hover {

width: 500px;

}

结束语

在 css3 中，我们通过属性实现不同的效果，但为增强客户体验度，就需要借助过渡让变化过程持续一段时间，实现简单的动画效果。互联网时代，css3 的过渡，是 web 前端开发人员必须掌握的一个技能，你学会了么？

相关文章：《CSS3 新特性之 calc( )详解》 http://www.maiziedu.com/group/article/6986/