免費(fèi)AI編程助手
CSS3 過(guò)渡
2018-10-30 11:44 更新
使用CSS3過(guò)渡，我們可以通過(guò)改變CSS屬性來(lái)創(chuàng)建動(dòng)畫(huà)。
我們可以控制時(shí)間，從值到值。
例如，我們可以在一秒鐘內(nèi)將元素的顏色從白色更改為黑色。
下表列出了所有過(guò)渡屬性：
- transition - 用于設(shè)置四個(gè)轉(zhuǎn)換屬性的簡(jiǎn)寫(xiě)屬性
- transition-delay - 指定過(guò)渡效果何時(shí)開(kāi)始
- transition-duration - 指定完成轉(zhuǎn)換所需的秒數(shù)或毫秒數(shù)
- transition-property - 指定轉(zhuǎn)換所用的CSS屬性的名稱(chēng)
- transition-timing-function - 指定轉(zhuǎn)換的速度曲線(xiàn)
創(chuàng)建動(dòng)畫(huà)
要使用CSS3過(guò)渡創(chuàng)建動(dòng)畫(huà)，我們必須指定兩個(gè)值：
- 更改CSS屬性
- 效果持續(xù)時(shí)間
以下代碼為width屬性添加了一個(gè)過(guò)渡效果，持續(xù)時(shí)間為2秒。
我們首先設(shè)置目標(biāo)屬性和持續(xù)時(shí)間。
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
如果未指定持續(xù)時(shí)間部分，則默認(rèn)值為0，并且不會(huì)有轉(zhuǎn)換。
我們必須觸發(fā)屬性變化。以下代碼使用鼠標(biāo)懸停事件觸發(fā)元素上的動(dòng)畫(huà)。
div:hover {
width: 300px;
}
這里是完整的源代碼。將鼠標(biāo)懸停在上面的div元素上，查看過(guò)渡效果。
<!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>轉(zhuǎn)換中的多個(gè)值
我們可以通過(guò)用逗號(hào)分隔屬性來(lái)為多個(gè)CSS屬性添加過(guò)渡效果。
<!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>
上面的代碼呈現(xiàn)如下：
相關(guān)屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| transition-delay | 延遲轉(zhuǎn)換前 | 3 |
| transition-duration | 設(shè)置轉(zhuǎn)換的持續(xù)時(shí)間 | 3 |
| transition-property | 在過(guò)渡效果中設(shè)置CSS屬性的名稱(chēng) | 3 |
| transition-timing-function | 設(shè)置過(guò)渡效果的速度曲線(xiàn) | 3 |
| transition | 設(shè)置四個(gè)過(guò)渡屬性的速度屬性 | 3 |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：