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

請把鼠標移動到下面的元素上：

CSS3 過渡

瀏覽器支持

屬性瀏覽器支持

transition	?	?	?	?	?

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。

Safari 需要前綴 -webkit-。

注釋：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

注釋：Chrome 25 以及更早的版本，需要前綴 -webkit-。

它如何工作？

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點，必須規定兩項內容：

• 規定您希望把效果添加到哪個 CSS 屬性上
• 規定效果的時長

實例

應用于寬度屬性的過渡效果，時長為 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; }

轉載于:https://www.cnblogs.com/heysng123456/p/7078293.html

總結

以上是生活随笔為你收集整理的CSS3 过渡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。