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

CSSでFlipInXアニメーション効果を実装する方法

CSSのFlipInXアニメーションは、要素がX軸を中心に回転しながら画面に登場する、立体感のある演出効果です。バナー画像やロゴなどを目立たせたい場面で活用できます。

このアニメーションは、@keyframesルールとtransform: perspective()プロパティを組み合わせることで実現します。要素は最初90度傾いて見えない状態から始まり、途中でわずかにオーバーシュートしながら最終的に正面へと戻ることで、自然な「フリップ」感を生み出します。

実装のポイント

  • perspective(400px): 立体感（奥行き）を表現するために指定します。
  • rotateX(): X軸を中心とした回転角度を制御します。
  • opacity: アニメーションの開始時（0%）は透明、終了時（100%）は不透明にすることで、滑らかな出現効果を作ります。
  • backface-visibility: visible: 要素の裏面が表示されるように設定します。

コード例

以下のコードを実行すると、FlipInXアニメーション効果を確認できます。「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 flipInX {
            0% {
               -webkit-transform: perspective(400px) rotateX(90deg);
               opacity: 0;
            }
            40% {
               -webkit-transform: perspective(400px) rotateX(-10deg);
            }
            70% {
               -webkit-transform: perspective(400px) rotateX(10deg);
            }
            100% {
               -webkit-transform: perspective(400px) rotateX(0deg);
               opacity: 1;
            }
         }
         @keyframes flipInX {
            0% {
               transform: perspective(400px) rotateX(90deg);
               opacity: 0;
            }
            40% {
               transform: perspective(400px) rotateX(-10deg);
            }
            70% {
               transform: perspective(400px) rotateX(10deg);
            }
            100% {
               transform: perspective(400px) rotateX(0deg);
               opacity: 1;
            }
         }
         .flipInX {
            -webkit-backface-visibility: visible !important;
            -webkit-animation-name: flipInX;
            backface-visibility: visible !important;
            animation-name: flipInX;
         }
      </style>
   </head>
   <body>

      <div id = "animated-example" class = "animated flipInX"></div>
      <button onclick = "myFunction()">Reload page</button>
     
       <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

アニメーションの仕組み解説

このコードでは、キーフレームごとに以下のような動きを定義しています。

  • 0%： 要素はX軸方向に90度回転し、完全に透明な状態です。
  • 40%： -10度まで回転し、少し行き過ぎた動きを見せます。
  • 70%： 今度は10度へ戻りながら揺り戻しを表現します。
  • 100%： 0度（正面）に戻り、完全に表示されます。

このようなオーバーシュートと揺り戻しを組み合わせることで、機械的な回転ではなく、弾力のある自然なアニメーションになります。-webkit-プレフィックス付きの記述も含まれているため、SafariなどWebKit系ブラウザでも同様に動作します。

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