SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.10.14
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【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-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秒になります。

背景色の変化について

01.滑らかに変化

ease

02.直線的に変化

linear

03.ゆっくり開始

ease-in

04.ゆっくり終了

ease-out

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

ease-in-out

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

step-start

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

step-end
<div class="transition-color01 transition">ease</div>
<div class="transition-color02 transition">linear</div>
<div class="transition-color03 transition">ease-in</div>
<div class="transition-color04 transition">ease-out</div>
<div class="transition-color05 transition">ease-in-out</div>
<div class="transition-color06 transition">step-start</div>
<div class="transition-color07 transition">step-end</div>
/*--共通 CSS--*/
.transition {
	width: 120px;
	height: 50px;
	line-height: 50px;
	color: #333;
	text-indent: 10px;
	background-color: #dee1e6;
}

/*--hover時の動き--*/
.transition-color:hover div {
	transition-duration: 3s;
	background-color: #fd5e5a;
}

.transition-color div {
	transition-duration: 3s;
}

/*--ease--*/
.transition-color01 {
	transition-timing-function: ease;
	background-color: #dee1e6;
}

/*--linear--*/
.transition-color02 {
	transition-timing-function: linear;
	/*--背景色 省略--*/
}

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

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

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

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

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

関連記事について

【STEP01 CSS】transition-propertyの使い方、トランジション効果を適用させる
transition-propertyプロパティとは、トランジション効果を適用させます。
【STEP03 CSS】transition-durationの使い方、効果が完了するまでの時間
transition-durationプロパティとは、トランジション効果が完了するまでの時間を指定します。
【STEP04 CSS】transition-delayの使い方、効果の開始時間を適用させる
transition-delayプロパティとは、トランジション効果が開始されるまでの時間を指定します。

まとめ

今回はこれで以上です。
次回は「トランジションの効果が完了するまでに時間」について解説します。

POINT
  • transitionトランジション効果とは、「時間的変化」の意味を持ちます。
  • transitionプロパティは、原則として「変化前のスタイル」に適用させます。
  • transition-timing-functionとは、効果の変化(速度)のタイミングを適用させます。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top