CSS3过渡

 

    CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

 

    它是如何工作？

 

    CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

 

    要实现这一点，必须规定两项内容：

 

    指定要添加效果的CSS属性

 

    指定效果的持续时间。

 

    实例

 

    应用于宽度属性的过渡效果，时长为2秒：

 

div

 

{

 

    transition: width 2s;

 

    -webkit-transition: width 2s; /* Safari */

 

}

 

    注意：如果未指定的期限，transition将没有任何效果，因为默认值是0。

 

    指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

 

    实例

 

    规定当鼠标指针悬浮(:hover)于<div>元素上时：

 

div:hover

 

{

 

    width:300px;

 

}