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

transition-durationプロパティは、CSSトランジションが発生する際の、変化にかかる持続時間を保持するプロパティです。このプロパティを使用することで、要素のスタイルが変化する際に、その変化がどれくらいの時間をかけて滑らかに実行されるかを指定できます。例えば、ボタンの色が変化する際に、瞬時に切り替わるのではなく、指定した時間で徐々に色が変わるようなアニメーション効果を作成します。

値には、時間を示す単位として秒（s）またはミリ秒（ms）を指定します。例えば、「1s」と指定すれば1秒間、「500ms」と指定すれば500ミリ秒かけてトランジションが完了します。初期値は「0s」であり、この場合、変化は即座に適用されるため、トランジション効果は発生しません。

複数のCSSプロパティに対してトランジションを設定する場合、それぞれのプロパティに異なる持続時間を適用したいときは、カンマで区切って複数の値を指定することが可能です。このプロパティは、transition-property、transition-timing-function、transition-delayなどの他のトランジション関連プロパティと組み合わせて使用することで、より詳細で多様なアニメーション表現を実現します。ユーザーインターフェースに動きと視覚的なフィードバックを与えることで、ウェブサイトやアプリケーションの操作性を向上させ、ユーザーエクスペリエンスを豊かにするために不可欠なプロパティです。

Copy
1.element {
2  transition-duration: 0.5s;
3}

引数なし

引数はありません

transition-durationプロパティは、CSSトランジションが完了するまでにかかる時間を指定します。これは時間単位で表現され、秒（s）またはミリ秒（ms）で指定できます。