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

CSSで作るシェイク（振動）アニメーションの実装方法

CSSのシェイク（振動）アニメーションとは？

シェイクアニメーションは、要素を左右（または上下）に素早く揺らすことで視覚的なインパクトを与えるCSSエフェクトです。フォーム入力エラーの警告や、ユーザーに注目してほしいコンテンツの強調など、幅広い場面で活用されています。

CSSでは@keyframesルールとtransform: translateX()を組み合わせるだけで、JavaScriptなどのスクリプトに頼らず手軽にこの効果を実装できます。

シェイクアニメーションの実装例

次のコードは、ロゴ画像を左右に振動させる例です。ページ下部の「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 shake {
            0%, 100% {-webkit-transform: translateX(0);}
            10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
            20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
         }

         @keyframes shake {
            0%, 100% {transform: translateX(0);}
            10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
            20%, 40%, 60%, 80% {transform: translateX(10px);}
         }

         .shake {
            -webkit-animation-name: shake;
            animation-name: shake;
         }
      </style>

   </head>
   <body>

      <div id = "animated-example" class = "animated shake"></div>
      <button onclick = "myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

コードのポイント解説

1. @keyframesで揺れのパターンを定義する

@keyframes shakeの中で、アニメーションの進行度（0%～100%）ごとに要素の位置を指定しています。0%と100%で元の位置（translateX(0)）に戻り、その間で-10pxと+10pxを交互に繰り返すことで、左右に揺れる動きを作り出しています。

キーフレームの間隔を細かく調整すれば、徐々に揺れが収まっていくような自然な減衰表現も可能です。

2. アニメーションを要素に適用する

.shakeクラスでanimation-name: shakeを指定し、.animatedクラス側でanimation-duration（再生時間）とanimation-fill-mode（開始前・終了後のスタイルの保持方法）を定義しています。HTML側で両方のクラスを付与することで、アニメーションが有効になります。

3. ベンダープレフィックス（-webkit-）について

コード内の-webkit-が付いた記述は、古いSafariやChrome向けの互換性確保のためのものです。近年のモダンブラウザでは標準の@keyframesやanimationプロパティが十分にサポートされているため、新規開発では省略しても問題ないケースがほとんどです。

カスタマイズのヒント

  • 揺れ幅の変更： translateX(-10px) / translateX(10px) の数値を大きくすると、より強い揺れになります。
  • 速度の調整： animation-durationの値を短くすると素早く、長くするとゆっくりと揺れます。
  • 上下方向の揺れ： translateX()をtranslateY()に置き換えると、上下に揺れるアニメーションになります。
  • 無限ループ： animation-iteration-count: infinite;を追加すると、アニメーションを繰り返し再生できます。

シェイクアニメーションはわずか数行のCSSで実装できるため、UIのフィードバックやデザインのアクセントとして気軽に取り入れられる便利なテクニックです。ぜひ自分のプロジェクトでも試してみてください。

  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°と段階的に変化