| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {transition-duration: 値 } |
| 値 の形式 | 時間 （単位：s=秒，ms=ミリ秒） |
| 初 期 値 | 0s |
| 対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+ |
| 適用可能な要素 | すべての要素，::before擬似要素，::after擬似要素 |
| 継 承 | しない |
transition-durationプロパティ は，変化にかける時間を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 時 間 | 変化にかける時間を単位：s=秒，ms=ミリ秒 で指定します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
margin: 30px;
padding: 20px;
border: 2px solid #0000ff;
}
div.sample div {
width: 220px;
color: #fff;
background: #666;
text-align: center;
padding: 5px 10px;
margin: 10px 0px;
}
div.sample:hover div{ width: 660px; }
.tdura1 { transition-duration: 1s; }
.tdura2 { transition-duration: 3000ms; }
.tdura3 { transition-duration: 5s; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <p>マウスカーソルを青枠の内外に置いてください！</p> <div class="tdura1">1秒間で 3倍・1/3幅に変化</div> <div class="tdura2">3秒間で 3倍・1/3幅に変化</div> <div class="tdura3">5秒間で 3倍・1/3幅に変化</div> </div> |
| ブラウザー 表示例 |
|---|
マウスカーソルを青枠の内外に置いてください！ 1秒間で 3倍・1/3幅に変化
3秒間で 3倍・1/3幅に変化
5秒間で 3倍・1/3幅に変化
|
この例では，<div>要素 の sampleクラス では，擬似クラス :hover を用いて，マウスカーソルの位置が変わると子要素の幅が変化するように指定しています。