【text-shadow】テキストに影をつける
みいと
おじさんのWEBデザイン学習まとめ
transition-timing-functionプロパティを使用すると、トランジションのスピードの設定をすることができます。
transition-timing-functionプロパティには、キーワードや関数を指定できますが、下記のキーワードがよく使われるようです。
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;
}
下記の四角にマウスカーソルを乗せると、背景色が変化します。
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;
}
下記の四角にマウスカーソルを乗せると、背景色が変化します。
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;
}
下記の四角にマウスカーソルを乗せると、背景色が変化します。
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;
}
下記の四角にマウスカーソルを乗せると、背景色が変化します。
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;
}
下記の四角にマウスカーソルを乗せると、背景色が変化します。
今回はトランジションスピードの設定についてまとめました。
例に出したアニメーションでは少しわかりにくいですが(汗)、トランジションのスピードを変化させることもできます。