transition-propertyプロパティは、どのCSSプロパティに対してトランジション（遷移効果）を適用するかを指定します。トランジションを適用するプロパティを一つまたは複数指定できます。トランジションはマウス、カーソルが重なることで適用されるアニメーションです。
INDEX
transition-propertyの値とその効果の一覧
- background-color: 背景色の変更にトランジションを適用します。
- transform: 変形（拡大縮小、回転など）にトランジションを適用します。
- background-color, transform: 背景色と変形にトランジションを同時に適用します。
注意点と関連情報
transition-propertyは、指定するプロパティに対してのみ遷移を適用します。allを指定することで、すべてのプロパティにトランジションを適用することも可能ですが、明示的に指定する方がパフォーマンスに優れます。複数のプロパティに対して異なるトランジションを適用する場合は、各プロパティをコンマで区切って指定します。
transition-propertyが効かない時の原因と対策
対象のプロパティがアニメーションできないプロパティ
transition-propertyは、指定したプロパティに対してトランジション効果を適用しますが、displayやvisibilityなど、アニメーション化できないプロパティを指定している場合、トランジションは機能しません。
対策: アニメーション可能なプロパティ（例: opacity, transform, background-colorなど）を指定します。例えば、transition-property: opacity;のように適切なプロパティを指定して、トランジション効果が確認できるかテストします。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 0 auto;
transition: all 1s ease;
}
.css-sample-box:hover {
transform: scale(1.5);
background-color: #FF5722;
}transition-property: background-color
背景色の変更にトランジションを適用します。背景色がスムーズに変わりますが、その他のプロパティ（例: 拡大縮小）には適用されません。マウスを重ねて確認してください。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-transition-bg"></div>
</div>CSSコード
.css-sample-transition-bg {
transition-property: background-color;
}表示結果
transition-property: transform
変形（例: 拡大縮小）にトランジションを適用します。背景色の変化は即座に行われますが、サイズの変更がスムーズに行われます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-transition-transform"></div>
</div>CSSコード
.css-sample-transition-transform {
transition-property: transform;
}表示結果
transition-property: background-color, transform
背景色と変形の両方にトランジションを適用します。背景色の変更と拡大縮小の両方がスムーズに行われます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-transition-multiple"></div>
</div>CSSコード
.css-sample-transition-multiple {
transition-property: background-color, transform;
}表示結果
まとめ
- transition-propertyは、どのCSSプロパティにトランジションを適用するかを決定します。
- 単一プロパティだけでなく、複数のプロパティに対しても適用可能です。
- パフォーマンスの観点から、
allよりも具体的なプロパティを指定する方が推奨されます。 - 複数のプロパティを指定する場合は、カンマで区切って並べてください。