【CSS】transitionプロパティで変化速度を制御する

CSSプロパティの変化速度を制御するtransitionプロパティについてメモ。

CSSプロパティの変化速度を制御する事でアニメーションのような効果を出す事が出来る。

本記事では、
擬似クラス「:hover」を使いマウスオーバー時にスタイルを変化させたときに
transitionプロパティを適用する※例で解説する。

※後述のSample1、Sample2

transition関連の各プロパティ

transition関連の各プロパティと適用時の効果をまとめる。

transition-propertyトランジションを適用させたいcssプロパティを指定する。color、transformなど。
transition-duration変化にかかる時間を秒(s)またはミリ秒(ms)で指定する。
transition-timing-function変化のタイミングを3次ベジェ曲線で指定する。「ease-in」「ease-out」「linear」など時間関数名でも指定出来る。
transition-delay変化が開始するまでの時間を秒(s)またはミリ秒(ms)で指定する。

(例)マウスオーバー時にtransitionを設定した場合
マウスを乗せて〜秒後に変化させる。など

sample1

transitionにより背景色が時間をかけて変化する。(クリックして確認)


transitionプロパティをショートハンドで記述している。


※ショートハンドを使わずプロパティを個別に設定する場合

(transitionの効果は同じ)

 

sample2

transitionで位置の変化に時間をかける。(クリックして確認)

マウスオーバー時、
transformプロパティ「translate()」で位置をx方向に-400px動かしている。

変化の際、変化にかかる時間と変化が開始するまでの時間を設定している。
また、時間関数 ease-out を適用し動きを滑らかにする効果も付けている。


ショートハンドで記述


※ショートハンドを使わずプロパティを個別に設定する場合

注意

transitionプロパティはあくまで変化速度を制御するだけなので
対象の要素が変化しないと効果を発揮をしない。

アニメーション自体を設定するにはanimationプロパティ、
要素の移動や変形、傾斜などにはtransformというそれぞれ別のプロパティを用いる。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください