こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ボタンや画像、アイコンなど、Webサイトで目を引く演出をしたいときに便利なのが「スケールアニメーション」です。
CSSのtransform: scale()を使えば、要素を拡大・縮小する動きを簡単に実装できます。
今回は、HTMLとCSSだけでスケールアニメーションを作る方法を、すぐに使える実用的なコード付きで紹介します！
どのパターンもコピペで使えるので、ぜひ試してみてください。
1. ホバーで拡大するスケールアニメーション
Webサイトでよく見かけるのが、マウスホバー時に要素が拡大するエフェクトです。
このアニメーションを適用すると、ボタンや画像を直感的に目立たせることができます。
【実装のポイント】
- :hoverを使って、マウスオーバー時に拡大
- transitionを適用し、スムーズな動きにする
- 拡大率をscale(1.2)程度に設定するとバランスが良い
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードを適用すると、マウスを重ねたときに要素が拡大し、離れると元のサイズに戻ります。
2. クリックで拡大・縮小するスケールアニメーション
次に、クリック時に拡大し、もう一度クリックすると元に戻るアニメーションを作成します。
ボタンのインタラクションや、拡大表示機能などに活用できます。
【実装のポイント】
- クリックイベントでscale()の値を変更
- toggleを使い、拡大と縮小を交互に切り替え
- 動きにtransitionを適用し、滑らかにする
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、クリックするたびに拡大と縮小が切り替わります。
3. ループするスケールアニメーション（ゆっくり脈動する動き）
最後に、自動でゆっくりと拡大・縮小を繰り返すアニメーションを作成します。
ローディング画面や、注目を集めたいエリアの演出に最適です。
【実装のポイント】
- @keyframesを使い、スケールを周期的に変化
- animationを適用し、無限ループさせる
- スムーズな動きのため、ease-in-outを設定
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このアニメーションでは、要素がゆっくりと膨らんだり縮んだりを繰り返します。
まとめ
- ホバーで拡大するエフェクトを簡単に実装できる
- クリックイベントを使うと、動的な拡大・縮小が可能
- ループアニメーションで、継続的なエフェクトを表現できる
スケールアニメーションは、Webサイトのアクセントとしてとても便利なので、ぜひ活用してみてください！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
