CSSでマウスオーバーでゆっくり変化させる方法
リンクやボタンにマウスを重ねるとゆっくり色や大きさが変化するスタイルを見かけたことがありますか？
実例をあげると以下のようなものです。
リンクにカーソルを合わせてみると、瞬間的に色が変わるのではなくゆっくり色が変わっているのがわかるはずです。
これは擬似クラスとtransitionプロパティを使うことで実現できる演出で、使い方さえわかれば簡単に実装できます。
マウスオーバーでゆっくり変化させる
まずは一番カンタンな、マウスオーバーでリンクの色を変化させるCSSを書いてみましょう。
色変化をアニメーションさせるには、元の要素に適用するCSSに、transitionプロパティで変化にかかる秒数を指定します。
上記サンプルコードだと0.5s(0.5秒)で変化が完了するということを指しています。つまり、0.5秒掛けてa:hover擬似クラスに記述したスタイルを適用するという仕組みになっています。
a{
transition:2s;
}
このように、0.5s(0.5秒)を2s(2秒)にするとマウスオーバー中のスタイルが完全に適用されるまで2秒かかるようになり、さらにゆっくり変化するようになります。
マウスオーバーで透過させる
transitionプロパティの使い方さえ分かっていればマウスオーバーによるアニメーションの実装はカンタンです。
例えばマウスオーバーした要素を透過したい場合は、以下のようにhover擬似クラスにopacityプロパティを与えるだけです。
opacityプロパティは要素の透明度を変化させるスタイルですので覚えておくと良いでしょう。完全に透明にしたとしても要素自体は存在しているためクリック等が可能である点がdisplay:noneとの違いでもあります。
displayプロパティはゆっくり変化できない
ほとんどのスタイルがアニメーションに対応していますが、displayプロパティはtransitionプロパティによるアニメーションに対応していません。
displayプロパティは仕様上ゆっくり変化させる概念が存在しないため、アニメーションすることができないのです。
上記サンプルのリンクにカーソル合わせてもらったらわかると思いますが、アニメーションの設定をCSSで行なっているに関わらず、display:noneによる表示・非表示の切り替えが瞬間的に行われているのが確認できるはずです。
マウスオーバーでゆっくり変化させる方法を極めようと思うと、キーフレームアニメーションなどかなり複雑なものもありますが、まずはtransitionプロパティでのアニメーションから始めてみてくださいね。