| 属性名 | tansition-property |
|---|---|
| 値 | none | <property> [, <property> ]* |
| 初期値 | all |
| 適用可能要素 | すべての要素 (::before, ::after を含む) |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 10 | 4(-moz) 16 | 1.0(-webkit) 26 | 11.5(-o) 12.1 | 3.1(-webkit) 6.1 |
トランジションの対象となる属性名を指定します。トランジションに関する詳細は transition を参照してください。
| 値 | 説明 |
|---|---|
| none | どの属性も対象としません。 |
| <property> | 対象とする属性名を指定します。all を指定するとすべての属性が対象となります。 |
下記の例は、.test クラスの要素にマウスを乗せた(:hover)際、0.1秒の遅延時間の後、横幅(width)を 0.2秒かけてリニア(linear)に 300px に広げています。
.test {
width: 100px;
height: 30px;
background: #f66;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
.test:hover {
width: 300px;
}
<div class="test"></div>