| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {transition: 値 } |
| 値 の形式 | transition-property transition-duration transition-timing-function transition-delay |
| 初 期 値 | 各プロパティの初期値 |
| 対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+ |
| 適用可能な要素 | すべての要素，::before擬似要素，::after擬似要素 |
| 継 承 | しない |
transitionプロパティ は，transition効果（時間的変化）の一括指定をします。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| transition-property | transition効果を適用する CSSプロパティ名を指定します。 |
| transition-duration | 変化にかける時間を指定します。 |
| transition-timing-function | 変化のタイミング・進行割合を指定します。 |
| transition-delayn | 変化の開始時間を指定します。 |
| 備 考 | 詳細は，各プロパティのページを見てください。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
margin: 30px;
padding: 20px;
border: 2px solid #0000ff;
}
div.sample div{
width: 200px;
color: #fff;
background: #666;
text-align: center;
padding: 5px 10px;
margin: 10px 0px;
}
div.sample:hover div{
width: 600px;
background-color:blue;
}
.trans1 { transition: all 3s ease 1s; }
.trans2 { transition: width 4s ease-in 0s; }
.trans3 { transition: all 1s ease-out 3s; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <p>マウスカーソルを青枠の内外に置いてください！</p> <div class="trans1">トランジション効果１</div> <div class="trans2">トランジション効果２</div> <div class="trans3">トランジション効果３</div> </div> |
| ブラウザー 表示例 |
|---|
マウスカーソルを青枠の内外に置いてください！ トランジション効果１
トランジション効果２
トランジション効果３
|
この例では，<div>要素 の sampleクラス では，擬似クラス :hover を用いて，マウスカーソルの位置が変わると子要素の幅が変化するように指定しています。