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

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

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

注释：

• 如果时长未规定，则不会有过渡效果，因为默认值是 0。
• 当指针移出元素时，它会逐渐变回原来的样式。

单样式添加过渡效果

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时。
该属性仅兼容到IE10！！！

div {
    width: 100px;
    height: 100px;
    background: #45390f;
    transition: width 1s, transform 1s;
    -moz-transition: width 1s, -moz-transform 1s;         /* Firefox 4 */
    -webkit-transition: width 1s, -webkit-transform 1s;   /* Safari 和 Chrome(低版本谷歌内核) */
    -o-transition: width 1s,-o-transform 1s;              /* Opera */
}

div:hover {
    width: 150px;
    background: #3450ff;  
}

特别要注意实现效果要规定上面的两项内容

多样式添加过渡效果

• 如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

div {
    width: 100px;
    height: 100px;
    background: #45390f;
    transition: width 1s, transform 1s;
    -moz-transition: width 1s, -moz-transform 1s;         /* Firefox 4 */
    -webkit-transition: width 1s, -webkit-transform 1s;   /* Safari 和 Chrome(低版本谷歌内核) */
    -o-transition: width 1s,-o-transform 1s;              /* Opera */
}

div:hover {
    width: 150px;
    background: #3450ff;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);      /* IE 9 */
    -moz-transform: rotate(360deg);     /* Firefox */
    -webkit-transform: rotate(360deg);  /* Safari 和 Chrome */
    -o-transform: rotate(360deg);
}

过渡属性

| 属性 | 描述 | CSS |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |

注释： 过渡效果的时间曲线（贝赛尔曲线）

| 值 | 描述 | 测试 |
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
贝塞尔曲线的详细介绍,以及要用到该曲线的其他的属性的关联