CSS3 過渡

通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果。

應用於寬度屬性的過渡效果，時長為 2 秒：

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

註釋：如果時長未規定，則不會有過渡效果，因為預設值是 0。

效果開始於指定的 CSS 屬性改變值時。CSS 屬性改變的典型時間是滑鼠指標位於元素上時：

例項

規定當滑鼠指標懸浮於 <div> 元素上時：

div:hover
{
width:300px;
}

多項改變

如需向多個樣式新增過渡效果，請新增多個屬性，由逗號隔開：

例項

向寬度、高度和轉換新增過渡效果：

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}