CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで実装するパルス（脈動）アニメーション効果の作り方

CSSのアニメーション機能を使えば、要素が心臓の鼓動のように拡大と縮小を繰り返す「パルス（脈動）効果」を簡単に実装できます。JavaScriptは不要で、@keyframesとtransform: scale()を組み合わせるだけで実現できるのが魅力です。

パルスアニメーションの仕組み

パルス効果は、主に以下のCSSプロパティを組み合わせて作られます。

  • @keyframes：アニメーションの開始（0%）、中間（50%）、終了（100%）の時点におけるスタイルを定義します。
  • transform: scale()：要素の大きさを拡大・縮小します。scale(1)が元のサイズ、scale(1.1)なら10%拡大を意味します。
  • animation-duration：アニメーション1回分の再生時間を指定します。
  • animation-fill-mode: both：アニメーションの開始前後もスタイルを保持し、自然な表示を実現します。

実装例

次のコードでは、画像にパルス効果を適用しています。「Reload page」ボタンをクリックするとページが再読み込みされ、アニメーションを最初から確認できます。

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes pulse {
            0% { -webkit-transform: scale(1); }
            50% { -webkit-transform: scale(1.1); }
            100% { -webkit-transform: scale(1); }
         }
         @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
         }
         .pulse {
            -webkit-animation-name: pulse;
            animation-name: pulse;
         }
      </style>
   </head>
   <body>
      <div id = "animated-example" class = "animated pulse"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

コードのポイント

  • @-webkit-keyframesはSafariなどWebKit系ブラウザ向けのベンダープレフィックス付きの記述です。最近のモダンブラウザでは、標準の@keyframesだけで動作します。
  • 0% → 50% → 100% の流れで、要素が「通常サイズ → 1.1倍に拡大 → 通常サイズへ戻る」と変化します。この動きによって、脈打つような視覚効果が生まれます。
  • 上記の例ではアニメーションが1回だけ再生されます。鼓動のように繰り返し表示したい場合は、.pulseクラスにanimation-iteration-count: infinite;を追加してください。
  • 拡大幅や速度を調整したい場合は、scale()の値やanimation-durationの秒数を変更することで、好みのリズムにカスタマイズできます。
  1. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {

  2. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化