こんにちは。
GOSHIMMERです。
今回は、ひと手間加えるだけで垢抜けられる、手軽なcssアニメーション「transition」についてご紹介します！
この記事はこんな人におすすめ
Webサイトを作ったけどどこか地味・・・
ホバーしたときにふわっとしたアニメーションを加えたい
transitionについて詳しく知りたい
transitionって何？
transitionとは、cssにおいて、アニメーションの速度（時間）を操作することができるプロパティです。
よく見かけるボタンなどをホバーした際にふわっと背景の色が変わったり、サイズが変わったりする動きを設定することができます。
transitionはショートハンドプロパティを含め、5つのプロパティがあります。
| transition-property | transitionを適用するプロパティの名前を指定します。 |
|---|---|
| transition-duration | transitionにかかる所要時間を指定します。複数の値を設定すると、複数のプロパティに適用、一つの値を設定すると、すべてに適用されます。 |
| transition-timing-function | transitionの変化の度合いを指定するプロパティです。 |
| transition-delay | transitionの変化が始まるまでの時間を指定します。 |
| transition | 上記のプロパティをまとめて指定できるショートハンドプロパティです。 |
これから一つ一つ解説していきます。
trantisionの使い方
transition-property
transition-propertyはtransitionを適用するプロパティの名前を指定します。
trantisionを設定したいけど、すべてではなく特定の要素にだけ設定したいという場合に、下記のように指定します。
hover時に幅が変わる速度にはtransitionを適用させたくないけど、背景の色を変えるときだけふわっとさせたい場合はこのように設定することができます。
transition-duration
transition-durationはtransitionにかかる所要時間を指定します。
複数の値を設定すると、複数のプロパティに適用、一つの値を設定すると、すべてに適用されます。
値は、秒数（s）またはミリ秒数（ms）で指定します。
指定する秒数によって印象がかなり変わってきます。
transition-timing-function
transition-timing-functionはtransitionの変化の度合いを指定するプロパティです。
下記の値を指定することで変化の度合いを変えることができます。
| ease（初期値） | 開始時と終了時は緩やかに変化 |
|---|---|
| linear | 開始から終了まで一定に変化 |
| ease-in | 開始時は緩やかに変化、終了に近づくと早く変化 |
| ease-out | 開始時は早く変化し、終了時は緩やかに変化 |
| ease-in-out | 開始時と終了時は、かなり緩やかに変化します。 |
transition-delay
transition-delayはtransitionの変化が始まるまでの時間を指定します。
transition-durationと同じく、値は、秒数（s）またはミリ秒数（ms）で指定します。
transition
transitionは、上記のプロパティをまとめて指定できるショートハンドプロパティです。
下記のような書き方で指定することができます。
copyするセレクタ名{ transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値; }
もし0秒で設定したいという場合も単位を省かずに、「0s」と記述するようにしてください。
まとめ
いかがだったでしょうか。
transitionを少し取り入れるだけで、各段に見栄えのいいデザインに仕上がると思います。
ただ使いすぎると逆に見る側のストレスになってしまったりするので、ポイントを押さえながら使っていきたいですね。
GOSHIMMER
