Design Code 設計密碼

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

瀏覽器支持

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;     <span class="code_comment">/* Firefox 4 */</span> 
-webkit-transition: width 2s;     <span class="code_comment">/* Safari和Chrome */</span> 
-o-transition: width 2s;     <span class="code_comment">/* Opera */</span>
}
	

註釋：如果時長未規定，則不會有過渡效果，因為默認值是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;
}
	

過渡屬性

下面的表格列出了所有的轉換屬性：

下面的兩個例子設置所有過渡屬性：

實例

在一個例子中使用所有過渡屬性：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
<span class="code_comment">/* Firefox 4 */</span>
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
<span class="code_comment">/* Safari 和Chrome */</span>
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
<span class="code_comment">/* Opera */</span>
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
	

實例

與上面的例子相同的過渡效果，但是使用了簡寫的transition 屬性：

div
{
transition: width 1s linear 2s;
<span class="code_comment">/* Firefox 4 */</span>
-moz-transition:width 1s linear 2s;
<span class="code_comment">/* Safari and Chrome */</span>
-webkit-transition:width 1s linear 2s;
<span class="code_comment">/* Opera */</span>
-o-transition:width 1s linear 2s;
}