CSS

【trainsition-timing-function】トランジションのスピード設定

みいと

transition-timing-functionプロパティでトランジションのスピード設定をする

transition-timing-functionプロパティを使用すると、トランジションのスピードの設定をすることができます。

transition-timing-functionプロパティには、キーワードや関数を指定できますが、下記のキーワードがよく使われるようです。

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear

ease

easeは、ゆっくり始まり加速してゆっくり終わります

easeがtransition-timing-functionプロパティの初期値です。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         trainsition-timing-function: ease;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

ease-in

ease-inは、ゆっくりと始まり一定速度で終わります。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         trainsition-timing-function: ease-in;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

ease-out

ease-outは、一定速度で始まりゆっくりと終わります。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         trainsition-timing-function: ease-out;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

ease-in-out

ease-in-outは、ゆっくり始まり、ゆっくり終わります。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         trainsition-timing-function: ease-in-out;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

linear

linearは、一定の速度で変化します。

#sample {
         width: 150px;
         height: 150px;
         background-color: gray;
         transition-property: background-color;
         transition-duration: 3s;
         trainsition-timing-function: linear;
}
#sample:hover {
         background-color: blue;
}

下記の四角にマウスカーソルを乗せると、背景色が変化します。

sample

トランジションスピードの設定のまとめ

今回はトランジションスピードの設定についてまとめました。

例に出したアニメーションでは少しわかりにくいですが(汗)、トランジションのスピードを変化させることもできます。

まとめ

  • transition-timing-functionを使用すると、トランジションのスピードを設定できる
  • transition-timing-functionの初期値はease

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました