【CSS Modules】transition-propertyプロパティの使い方

transition-propertyプロパティは、CSSトランジションの対象となるプロパティを指定するプロパティです。要素のスタイルが変化する際に、滑らかなアニメーション効果（トランジション）を適用したい場合に利用します。

このプロパティには、トランジションの対象としたいCSSプロパティ名を指定します。例えば、width（幅）、background-color（背景色）、opacity（不透明度）など、様々なプロパティを対象にできます。複数のプロパティを対象とする場合は、カンマ区切りでそれらのプロパティ名を列挙します。

特別なキーワードとして、allを指定すると、すべてのプロパティがトランジションの対象となり、何らかのスタイル変更があった際にアニメーションが適用されます。一方、noneを指定すると、どのプロパティもトランジションの対象外となり、スタイル変更は瞬時に適用され、アニメーション効果は発生しません。

transition-propertyで指定されたプロパティの値が変化すると、即座に変化するのではなく、指定された設定に従って滑らかに中間値を補間しながら変化する視覚効果が生まれます。これにより、ユーザーインターフェースに動きと快適さを加えることが可能になります。

このプロパティは、transition-duration（アニメーションの長さ）、transition-timing-function（アニメーションの速度曲線）、transition-delay（アニメーション開始までの遅延時間）といった他のトランジション関連プロパティと組み合わせて使用されます。transitionショートハンドプロパティでまとめて設定することも可能ですが、transition-propertyは、アニメーションの対象を明確に指定する上で重要な役割を果たします。

Copy
1transition-property: width;

引数なし

引数はありません

戻り値なし

戻り値はありません