HTML/CSS

【CSSTransition】hover時に要素を拡大するCSSアニメーション

悩む人
悩む人

hoverした時に画像やテキストに動きを加えたい。jQueryは難しいから、CSSで簡単に実装したい。

 

こんなお悩みに答えます。

結論から言うと、要素をアニメーションさせるCSSの機能、transitionを使うとスッキリカンタンに実装できます。

それでは、簡単に解説していきます。

 

transitionでhover時に動きを加える

 

See the Pen
transition-hover
by kei (@kei_01011)
on CodePen.


今回は、「マウスホバー時に要素を拡大する」という動きを実装しました。

コピペして使えば問題ありませんが、ポイントを解説していきます。

 

要素に動きをつけるには3つのポイントがあります。

  1. overflow:hidden;ではみ出た要素の隠す
  2. transform: scale()で拡大率を指定
  3. transition-durationで変化にかかる時間を指定

 

overflow:hidden;ではみ出た要素の隠す

拡大する要素によっては、はみ出た際に周りの要素に影響を与える可能性があります。

拡大した時に、自動的にはみ出た部分を隠すためにも、overflow:hidden;を指定しておきましょう。

 

transform: scale()で拡大率を指定

transform:scale()は、要素を拡大、縮小することができるプロパティです。

()内に拡大率を指定することで、その大きさに拡大することが可能です。

 

詳しくは、リファレンスを確認しましょう。

 

transition-durationで変化にかかる時間を指定

マウスホバーしてから、要素のアニメーションが開始するまでの時間を指定します。

ここで、「0s」としておくと、マウスホバー時すぐにアニメーションが始まります。