閱讀(11.4k) 書簽贊(5) 我要糾錯

CSS3 過渡

2018-10-30 11:44 更新

使用CSS3過渡，我們可以通過改變CSS屬性來創(chuàng)建動畫。

我們可以控制時間，從值到值。

例如，我們可以在一秒鐘內將元素的顏色從白色更改為黑色。

下表列出了所有過渡屬性：

transition - 用于設置四個轉換屬性的簡寫屬性
transition-delay - 指定過渡效果何時開始
transition-duration - 指定完成轉換所需的秒數或毫秒數
transition-property - 指定轉換所用的CSS屬性的名稱
transition-timing-function - 指定轉換的速度曲線

創(chuàng)建動畫

要使用CSS3過渡創(chuàng)建動畫，我們必須指定兩個值：

更改CSS屬性
效果持續(xù)時間

以下代碼為width屬性添加了一個過渡效果，持續(xù)時間為2秒。

我們首先設置目標屬性和持續(xù)時間。

div {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

如果未指定持續(xù)時間部分，則默認值為0，并且不會有轉換。

我們必須觸發(fā)屬性變化。以下代碼使用鼠標懸停事件觸發(fā)元素上的動畫。

div:hover {
    width: 300px;
}

這里是完整的源代碼。將鼠標懸停在上面的div元素上，查看過渡效果。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: black;
    -webkit-transition: width 2s;
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<div>Hi</div>

</body>
</html>

轉換中的多個值

我們可以通過用逗號分隔屬性來為多個CSS屬性添加過渡效果。


<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: black;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
</style>
</head>
<body>
    <div>Hover me to see the transition effect!</div>
</body>
</html>

上面的代碼呈現如下：

相關屬性

屬性	描述	CSS
transition-delay	延遲轉換前	3
transition-duration	設置轉換的持續(xù)時間	3
transition-property	在過渡效果中設置CSS屬性的名稱	3
transition-timing-function	設置過渡效果的速度曲線	3
transition	設置四個過渡屬性的速度屬性	3