【transition-delay】トランジションの開始時間
みいと
おじさんのWEBデザイン学習まとめ
【trainsition-timing-function】トランジションのスピード設定
みいと
Contents
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
興味を持ったものをいろいろと勉強しています。
