CSS3 過渡屬性
W3C標(biāo)準(zhǔn)中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值?！?br/>css3過渡（CSS Transition）讓動(dòng)畫變的生動(dòng)更逼真，一起來學(xué)習(xí)一下CSS Transition。
它是如何工作？
CSS3的過渡效果，讓一個(gè)元素從一種效果轉(zhuǎn)換到另一種效果，要做到這一點(diǎn)，你必須指定兩件事和指定效果的持續(xù)時(shí)間。
例如：
.className{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
注意：如果未指定動(dòng)畫延遲時(shí)間，過渡將沒有任何效果，因?yàn)槟J(rèn)值是0。
鼠標(biāo)放上去的時(shí)候，變換開始：
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微軟雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> 樣式改變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>過渡屬性
下表列出了所有的過渡屬性:
屬性 描述 CSS
transition 簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 3
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 3
transition-timing-function 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 3
transition-delay 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠標(biāo)在圖片上面懸停2秒才顯示效果</p>
</body>
</html>
![Beginnen Sie schnell mit dem Golang Gin-Framework [Verwenden Sie Gin, um ein gleichzeitiges IM-Instant-Messaging-System auf Millionenebene aufzubauen]](https://img.php.cn/upload/course/000/000/068/63a2b21046723283.jpg)
