CSS3中的新特性-过渡

CSS3中的过渡

• CSS3中新增了一个过渡属性，它使得我们可以在不使用flash动画或者Javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加过渡效果。这种过渡是从一个状态渐渐的过渡到另外一个状态。

• 过渡最简单的使用是和hover一起搭配使用。

• 它的语法为：

    transition: 要过渡的属性 花费的时间 运动曲线 开始时间;
  

• 参数说明：

参数	解释
要过渡的属性（必须写）	要变化的属性，比如宽度，高度，颜色，内外边距等都可以。如果想要所有的属性都变化，那么可以用all来代替。
花费的时间（必须写）	完成这个过渡变化的效果用多长时间。单位是秒，注意：一定要写上单位例如0.5s或者.5s
运动曲线（可以省略）	默认值是ease(变化速度逐渐慢下来)，跟多值参考下一个表格。
开始时间（可以省略）	默认为0s(必须写单位),可以设置延迟触发时间

• 运动曲线取值表格

运动曲线可取值	含义
linear	匀速
ease	逐渐慢下来
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

• 例如：

    /* CSS */
    .a {
        width: 150px;
        height: 10px;
        border: 1px solid red;
        border-radius: 5px;
    }
  
    .b {
        width: 50%;
        height: 100%;
        border-radius: 5px;
        background-color: red;
        transition: width .5s;
    }
  
    .a:hover .b {
        width: 100%;
    }
  
    <!-- HTML -->
    <div class="a">
    	<div class="b"></div>
    </div>
  

• 上述代码产生的效果为：当鼠标移动到a盒子上时，进度条会用0.5秒的时间渐渐过渡到100%