悩む人hoverした時に画像やテキストに動きを加えたい。jQueryは難しいから、CSSで簡単に実装したい。こんなお悩みに答えます。結論から言うと、要素をアニメーションさせるCSSの機能、transitionを使うとスッキリカンタンに実装できます。それでは、簡単に解説していきます。CodePen.今回は、「マウスホバー時に要素を拡大する」という動きを実装しました。コピペして使えば問題ありませんが、ポイントを解説していきます。要素に動きをつけるには3つのポイントがあります。scale()で拡大率を指定transition-durationで変化にかかる時間を指定overflow:hidden;ではみ出た要素の隠す拡大する要素によっては、はみ出た際に周りの要素に影響を与える可能性があります。拡大した時に、自動的にはみ出た部分を隠すためにも、overflow:hidden;を指定しておきましょう。scale()で拡大率を指定transform:scale()は、要素を拡大、縮小することができるプロパティです。()内に拡大率を指定することで、その大きさに拡大することが可能です。詳しくは、リファレンスを確認しましょう。transformCSS3リファレンスtransition-durationで変化にかかる時間を指定マウスホバーしてから、要素のアニメーションが開始するまでの時間を指定します。ここで、「0s」としておくと、マウスホバー時すぐにアニメーションが始まります。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。