【CSS】transition-timing-functionの使い方、効果の変化を適用させる

シュウ

今回は【CSS】transition-timing-functionの使い方、効果の変化を適用させる!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
transitionプロパティについて学びたい方へ
今回はtransition-timing-functionで変化のタイミングを適用についての解説になります。

今回は、transitionに関する記事になります。
transitionトランジション効果とは、「時間的変化」の意味を持ちます。

transitionプロパティは、原則として「変化前のスタイル」に適用させます。
例として、「a」、「a:hover」があるとしたら、変化前である「a」の方に適用させます。

[記事の内容]

transition-timing-functionの使い方について

transition-timing-functionプロパティとは、トランジション効果の変化(速度)のタイミングを適用させます。
書き方は以下のようになります。

/*--例:transition-timing-function--*/
要素 {
	transition-timing-function: 値;
}

指定できる値

transition-timing-function
今回はここを解説！
トランジション効果の変化(速度)のタイミングを適用させます。
transition-property　
解説の記事ありますよ
トランジション効果を適用させます。
transition-duration　
解説の記事ありますよ
トランジション効果が完了するまでの時間を指定します。
transition-delay　
解説の記事ありますよ
トランジション効果が開始されるまでの時間を指定します。

transition-timing-function 指定方法について

timing-functionプロパティとは、トランジション効果の変化(速度)のタイミングを適用させます。
「最初はゆっくりで、だんだん速く」、「最初は速く、だんだんゆっくり」などアニメーションに変化(速度)の
指定が可能になります。

指定できる値

ease(初期値)
開始と終了を滑らかに変化します
linear
直線的(一定速度)に変化します
ease-in
ゆっくり開始します
ease-out
ゆっくり終了します
ease-in-out
ゆっくり開始してゆっくり終了します
step-start
開始から終了状態に一気に変化し、その後は変化しません
step-end
最初は変化せず、最後の段階へ一気に変化します
steps(ステップ数,起点キーワード)
1つ目の値にステップ数、2つ目の値にstart、endのいずれかを指定します
cubic-bezier(n,n,n,n)
三次ベジェ曲線の軌跡によって変化の進行度を指定します。
下記のサイトで動きの確認ができます、一度ご参考にしてみてください
Ceaser – CSS Easing Animation Tool – Matthew Lein

動きの変化(速度)について

マウスオーバー「:hover」での変化を指定しています。
マウスオーバー「:hover」で「margin-left:300px」動きます。

今回は、トランジション効果が完了するまでの時間を「transition-duration: 3s」で指定しています、
3sは3秒になります。

動きの変化(速度)について

01.滑らかに変化

ease

02.直線的に変化

linear

03.ゆっくり開始

ease-in

04.ゆっくり終了

ease-out

05.ゆっくり開始してゆっくり終了

ease-in-out

06.開始から終了状態に一気に変化

step-start

07.最初は変化せず、最後の段階へ一気に変化

step-end

<div class="transition-function01 transition">ease</div>
<div class="transition-function02 transition">linear</div>
<div class="transition-function03 transition">ease-in</div>
<div class="transition-function04 transition">ease-out</div>
<div class="transition-function05 transition">ease-in-out</div>
<div class="transition-function06 transition">step-start</div>
<div class="transition-function07 transition">step-end</div>

/*--共通 CSS--*/
.transition {
	width: 120px;
	height: 50px;
	line-height: 50px;
	color: #333;
	text-indent: 10px;
	background-color: #dee1e6;
}

/*--hover時の動き--*/
.transition-area:hover div {
  margin-left: 300px;
  transition-duration: 3s;
}

/*--ease--*/
.transition-function01 {
	transition-timing-function: ease;
}

/*--linear--*/
.transition-function02 {
	transition-timing-function: linear;
}

/*--ease-in--*/
.transition-function03 {
	transition-timing-function: ease-in;
}

/*--ease-out--*/
.transition-function04 {
	transition-timing-function: ease-out;
}

/*--ease-in-out--*/
.transition-function05 {
	transition-timing-function: ease-in-out;
}

/*--step-start--*/
.transition-function06 {
	transition-timing-function: step-start;
}

/*--step-end--*/
.transition-function07 {
	transition-timing-function: step-end;
}

背景色の変化について

先ほどと同じ指定をしています。
トランジション効果が完了するまでの時間を「transition-duration: 3s」で指定しています、
3sは3秒になります。