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

CSSでFlipアニメーションを実装する方法｜要素を反転させるエフェクトの作り方

CSSのアニメーションを使うと、Webページ上の要素をくるっと反転させる「Flip（フリップ）」エフェクトを簡単に実装できます。この記事では、@keyframesとtransformプロパティを組み合わせて、要素が勢いよくひっくり返るアニメーションを作る方法を、実際のコード例とともに解説します。

Flipアニメーションの仕組み

Flipアニメーションは、CSSの3D変形（perspective）と回転（rotateY）を活用したテクニックです。要素がY軸を中心に360度回転することで、まるでカードが裏返るような視覚効果を実現します。

アニメーションの流れは以下の通りです。

  • 0%： 通常の状態からスタートし、ease-outで加速しながら回転を開始
  • 40%： 奥行き方向に150px移動しながら170度まで回転
  • 50%： 回転が190度に達し、一時的に拡大率1.0を維持
  • 80%： 360度まで回転を完了し、少し縮小（0.95倍）して着地の準備
  • 100%： 元のサイズに戻ってアニメーション完了

このようにキーフレームごとにanimation-timing-functionを切り替えることで、自然で躍動感のある動きを作り出せます。

コード例：Flipアニメーションの完全なサンプル

以下は、画像ロゴが反転するアニメーションの完全なHTMLコードです。ボタンをクリックするとページが再読み込みされ、アニメーションを何度でも確認できます。

<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 flip {
            0% {
               -webkit-transform: perspective(400px) rotateY(0);
               -webkit-animation-timing-function: ease-out;
            }
            40% {
               -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
               -webkit-animation-timing-function: ease-out;
            }
            50% {
               -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
               -webkit-animation-timing-function: ease-in;
            }
            80% {
               -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
               -webkit-animation-timing-function: ease-in;
            }
            100% {
               -webkit-transform: perspective(400px) scale(1);
               -webkit-animation-timing-function: ease-in;
            }
         }
         
         @keyframes flip {
            0% {
               transform: perspective(400px) rotateY(0);
               animation-timing-function: ease-out;
            }
            40% {
               transform: perspective(400px) translateZ(150px) rotateY(170deg);
               animation-timing-function: ease-out;
            }
            50% {
               transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
               animation-timing-function: ease-in;
            }
            80% {
               transform: perspective(400px) rotateY(360deg) scale(.95);
               animation-timing-function: ease-in;
            }
            100% {
               transform: perspective(400px) scale(1);
               animation-timing-function: ease-in;
            }
         }
         .flip {
            -webkit-backface-visibility: visible !important;
            -webkit-animation-name: flip;
            backface-visibility: visible !important;
            animation-name: flip;
         }
      </style>
   </head>
   
   <body>
      <div id = "animated-example" class = "animated flip"></div>
      <button onclick = "myFunction()">Reload page</button>
      
      <script>
        function myFunction() {
            location.reload();
        }
      </script>
   </body>
</html>

コードのポイント解説

1. ベンダープレフィックスへの対応

このコードでは、-webkit-プレフィックス付きの記述と標準仕様の記述を両方含めています。これにより、SafariなどWebKit系ブラウザを含む幅広い環境でアニメーションが動作します。近年のモダンブラウザでは標準の@keyframesだけで十分な場合が多いですが、古いブラウザへの互換性が必要な場合はプレフィックス版も残しておくと安心です。

2. backface-visibility の設定

.flipクラス内のbackface-visibility: visibleは、要素が回転して裏面を見せる瞬間の表示を制御します。visibleを指定することで、回転中も要素の裏側が透けて見え、より立体的なFlip表現になります。

3. アニメーションの再実行

CSSアニメーションは一度再生されると自動的には繰り返されません。サンプルではボタンクリック時にJavaScriptのlocation.reload()でページを再読み込みすることで、アニメーションを再度再生できるようにしています。

応用のヒント

このFlipアニメーションは、そのままカード型UIや画像ギャラリー、ホバー時の演出などに応用できます。たとえば、:hover疑似クラスと組み合わせてマウスオーバー時に反転させたり、animation-delayを使って複数要素に時間差をつけたりすると、さらにリッチな表現が可能です。

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