CSS3过渡属性（transition）入门——菜单下划线示例

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

属性的改变默认是没有过渡效果的，通过添加transition属性我们可以：

• 设置过渡时长；
• 调整过渡速度。

下面我将为这个下划线的width添加过渡属性，当下次这个width改变时，将会出现一个过渡效果。

#line {
    margin: 10px auto;
    height: 4px;
    background-color: #4b8bfd;
    width: 0px;
    transition-property: width; /* 选中要添加过渡的元素 */
    transition-duration: 0.2s; /* 设置过渡时间 */
    transition-timing-function: cubic-bezier(0,.83,.72,1.03); /* 规定过渡的时间曲线 */
    transition-delay: 0; /* 规定过渡效果何时开始 */
}

以上用到了所有的过渡属性，也可以使用简写属性：

/*transition: property duration timing-function delay;*/
transition: width 0.2s cubic-bezier(0,.83,.72,1.03);

下面是最有趣的部分——时间曲线（贝塞尔曲线），除了现有的几个时间曲线（linear，ease，ease-in，ease-out,ease-in-out）外，我们还可以手动调整时间曲线来达到你想要的过渡效果。贝塞尔曲线工具

本文示例：一个菜单下划线过渡效果