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

CSSで実装するウォブル（揺れ）アニメーション効果の作り方

CSSの@keyframesとtransformプロパティを組み合わせることで、要素を左右に揺らす「ウォブル（wobble）アニメーション」を簡単に実装できます。移動と回転を段階的に変化させることで、まるで物体がぐらついているような自然な動きを表現できるのが特徴です。

以下のサンプルコードを実行して、実際のアニメーション効果を確認してみましょう。

サンプルコード

<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 wobble {
            0% { -webkit-transform: translateX(0%); }
            15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
            30% { -webkit-transform: translateX(20%) rotate(3deg); }
            45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
            60% { -webkit-transform: translateX(10%) rotate(2deg); }
            75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
            100% { -webkit-transform: translateX(0%); }
         }
         @keyframes wobble {
            0% { transform: translateX(0%); }
            15% { transform: translateX(-25%) rotate(-5deg); }
            30% { transform: translateX(20%) rotate(3deg); }
            45% { transform: translateX(-15%) rotate(-3deg); }
            60% { transform: translateX(10%) rotate(2deg); }
            75% { transform: translateX(-5%) rotate(-1deg); }
            100% { transform: translateX(0%); }
         }
         .wobble {
            -webkit-animation-name: wobble;
            animation-name: wobble;
         }
       </style>
   </head>
   <body>
      <div id = "animated-example" class = "animated wobble"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
           location.reload();
         }
      </script>
   </body>
</html>

コードのポイント解説

@keyframesで揺れの動きを定義

@keyframes wobbleでは、アニメーションの進行度（0%～100%）に応じて、translateX()で水平方向の移動量を、rotate()で回転角度を指定しています。移動量と回転角を交互に振りながら徐々に小さくしていくことで、振り子がやがて静止していくような自然な「ぐらつき」を表現しています。

アニメーションの再生設定

animation-duration: 10s;でアニメーション全体の長さを10秒に設定しています。また、animation-fill-mode: both;を指定することで、アニメーションの開始前・終了後もスタイルが適用された状態が維持されます。

ベンダープレフィックスについて

-webkit-が付いた記述は、古いSafariやChromeなどWebKit系ブラウザ向けのベンダープレフィックスです。現在のモダンブラウザでは標準の@keyframesやtransformのみで動作しますが、古いブラウザへの互換性が必要な場合は併記しておくと安心です。

カスタマイズのヒント

揺れの強さを調整したい場合は、各キーフレームのtranslateX()のパーセント値やrotate()の角度を変更してください。値を大きくすると激しい揺れに、小さくすると控えめな揺れになります。また、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°と段階的に変化