【CSS】アニメーション-CSS Transition

タグ :

CSS

1 基本的な使用法
2 transitionプロパティの詳細
3 基本的な指定方法
4 transitionの省略した記述方法

基本的な使用法

対象要素のスタイルを定義する

初期状態のスタイルを指定します。

変化後のスタイルを指定します。

transitionプロパティを使用する

transition-property: 変化するプロパティを指定します（例：width、height、background-colorなど）。

transition-duration: 変化にかかる時間を指定します（例：2s、500msなど）。

transition-timing-function: アニメーションの進行速度を指定します（例：linear、ease、ease-in、ease-outなど）。

transition-delay: アニメーションの開始を遅らせる時間を指定します（任意）。

transitionプロパティの詳細

transition-property

アニメーションの対象となるプロパティを指定します。allを指定すると、すべての変更にアニメーションが適用されます。

transition-duration

アニメーションの時間を秒（s）またはミリ秒（ms）で指定します。

transition-timing-function

アニメーションの進行の仕方を指定します。一般的な値は次の通りです。

linear: 一定の速度で変化します。
ease: 自動的に速度が変わります（デフォルト）。
ease-in: 最初は遅く、徐々に速くなります。
ease-out: 最初は速く、徐々に遅くなります。
ease-in-out: 最初と最後が遅く、中間が速くなります。

transition-delay

アニメーションの開始を遅らせる時間を秒またはミリ秒で指定します。

基本的な指定方法



div.button {
background-color: blue; /* ホバー前の色 */
color: white;
transition-property:background-color; /* 擬似クラスにbackground-colorを捉えるよう指示 */
transition-duration:1s; /* 1秒かけて変化 */
transition-timing-function:ease; /* アニメーションの動き */
transition-delay.2s; /* 0.2秒後に開始 */
}

div.button:hover {
background-color: red; /* ホバー時の色変更 */
}

transitionの省略した記述方法



transition:background-color 1s ease 0.2;

前ページに戻る