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

CSSで作るヒンジ（蝶番）アニメーション効果の実装方法

CSSのヒンジ（蝶番）アニメーションは、要素が蝶番を軸にしてぐらぐらと回転し、最後に落下しながら消えていく演出です。ドアが蝶番から外れて落ちるような動きを表現できるため、要素を退場させる際のユニークなエフェクトとして活用できます。

ヒンジアニメーションの仕組み

このアニメーションでは、transform-origin を top left（左上）に設定することで、要素の左上を回転の軸にしています。キーフレーム内で回転角度を 0度 → 80度 → 60度 → 80度 と揺らしながら変化させ、最後に translateY(700px) で画面下方向へ落としつつ、opacity: 0 でフェードアウトさせることで、自然な「落ちる」動きを実現しています。

サンプルコード

以下のコードを実行すると、ヒンジアニメーション効果を確認できます。ページ読み込み時にアニメーションが再生され、「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: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes hinge {
            0% {
               -webkit-transform: rotate(0);
               -webkit-transform-origin: top left;
               -webkit-animation-timing-function: ease-in-out;
            }

            20%, 60% {
               -webkit-transform: rotate(80deg);
               -webkit-transform-origin: top left;
               -webkit-animation-timing-function: ease-in-out;
            }
            40% {
               -webkit-transform: rotate(60deg);
               -webkit-transform-origin: top left;
               -webkit-animation-timing-function: ease-in-out;
            }
            80% {
               -webkit-transform: rotate(60deg) translateY(0);
               opacity: 1;
               -webkit-transform-origin: top left;
               -webkit-animation-timing-function: ease-in-out;
            }
            100% {
               -webkit-transform: translateY(700px);
               opacity: 0;
            }
         }

         @keyframes hinge {
            0% {
               transform: rotate(0);
               transform-origin: top left;
               animation-timing-function: ease-in-out;
            }
            20%, 60% {
               transform: rotate(80deg);
               transform-origin: top left;
               animation-timing-function: ease-in-out;
            }
            40% {
               transform: rotate(60deg);
               transform-origin: top left;
               animation-timing-function: ease-in-out;
            }
            80% {
               transform: rotate(60deg) translateY(0);
               opacity: 1;
               transform-origin: top left;
               animation-timing-function: ease-in-out;
            }
            100% {
               transform: translateY(700px);
               opacity: 0;
            }
         }

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

   </head>
   <body>

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

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

コードのポイント

  • @keyframes hinge：アニメーションの各段階（0%〜100%）における要素の状態を定義します。
  • transform-origin: top left：回転の基準点を要素の左上に設定し、蝶番のような動きを作り出します。
  • animation-timing-function: ease-in-out：動きに緩急をつけ、自然な揺れを表現します。
  • -webkit- プレフィックス：SafariなどのWebKit系ブラウザでも正しく動作するように、ベンダープレフィックス付きの記述を併記しています。
  • animation-fill-mode: both：アニメーションの開始前・終了後もスタイルが適用されたままになり、意図しない表示崩れを防ぎます。

回転角度や translateY の移動量、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°と段階的に変化