【CSS Modules】time型の使い方
time型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
timeオブジェクトは、CSSにおいて時間量を表す値を定義するためのものです。これは、Webページの要素にアニメーションやトランジションといった動的な効果を適用する際に、その「いつ、どれくらいの速さで」といったタイミングを制御するために不可欠なデータ型です。
timeは、数値を時間の単位と組み合わせて表現されます。主な単位は以下の二つです。
s（秒）：例えば、1sは1秒を表します。ms（ミリ秒）：例えば、500msは0.5秒を表します。
これらの単位は数値の直後に記述し、間にスペースを入れることはありません。例えば、animation-duration: 2s; や transition-delay: 300ms; のように使用されます。
CSSの多くのプロパティ、例えばanimation-duration（アニメーションの持続時間）、transition-delay（トランジションの遅延時間）、scroll-behavior（スクロール動作）など、時間に関連する値を受け入れるプロパティで利用されます。
注意点として、time値は通常、負の値を指定することはできません。負の値を指定した場合、多くのブラウザではその値を無効と見なすか、0sとして扱います。
システムエンジニアを目指す初心者の方にとって、timeはWebサイトに動きとインタラクションを加えるための基本的な構成要素であり、その理解はユーザーエクスペリエンスを向上させるデザインを実現するために重要です。
公式リファレンス: <time>
構文(syntax)
1transition-duration: 1s;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません