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

CSSでバウンスアウト（跳ね返り）アニメーション効果を実装する方法

CSSを使えば、JavaScriptなどの追加ライブラリに頼らずとも、要素が縮みながら跳ね返って消えていく「Bounce Out（バウンスアウト）」アニメーションを簡単に実装できます。この記事では、@keyframesとanimationプロパティを組み合わせた具体的なサンプルコードを紹介します。

バウンスアウトアニメーションの仕組み

Bounce Outは、要素が一度わずかに縮み、次に少し膨らんでから急激に小さくなりながらフェードアウトしていくアニメーションです。ボタンや画像が画面から消える際の演出などによく使われます。

動作の流れは以下のとおりです。

  • 0%： 通常サイズ（scale(1)）からスタート
  • 25%： わずかに縮小（scale(.95)）
  • 50%： 一度膨らみ（scale(1.1)）、不透明度は100%
  • 100%： 急激に縮小しながら透明になり消える（scale(.3)、opacity: 0）

サンプルコード

以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くとアニメーションを確認できます。「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 bounceOut {
            0% {
               -webkit-transform: scale(1);
            }
            25% {
               -webkit-transform: scale(.95);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.1);
            }
            100% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
         }
         @keyframes bounceOut {
            0% {
               transform: scale(1);
            }
            25% {
               transform: scale(.95);
            }
            50% {
               opacity: 1;
               transform: scale(1.1);
            }
            100% {
               opacity: 0;
               transform: scale(.3);
            }
         }
         .bounceOut {
            -webkit-animation-name: bounceOut;
            animation-name: bounceOut;
         }

      </style>
   </head>

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

コードのポイント解説

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

サンプルでは-webkit-付きの記述と標準仕様の記述を両方定義しています。これにより、SafariなどWebKit系ブラウザの旧バージョンでも正しく動作します。近年のモダンブラウザでは標準の@keyframesのみで十分ですが、古い環境をサポートする場合は併記しておくと安心です。

2. animation-durationとanimation-fill-mode

animation-duration: 10s;でアニメーション全体の長さを10秒に設定しています。よりテンポの良い演出にしたい場合は、この値を短く（例：2s〜3s）調整してください。また、animation-fill-mode: both;を指定することで、アニメーション開始前後もキーフレームの状態が保持され、要素が最終的に非表示のまま残ります。

3. transform: scale()による拡大・縮小

transform: scale()は要素の大きさを変化させるプロパティです。scale(1)が元のサイズを表し、1未満で縮小、1超で拡大となります。この値を段階的に変化させることで、弾むような躍動感のある演出を実現しています。

まとめ

CSSの@keyframesを使えば、Bounce Outのような複雑に見えるアニメーションも数行のスタイル定義だけで実装できます。durationやscaleの値を変更すれば、さまざまなシーンに合わせたカスタマイズも自由自在です。ぜひ実際のWebサイトの演出に活用してみてください。

  1. CSSで回転しながら消えるアニメーション（rotateOut）を作る方法

    CSSを使えば、要素が回転しながら画面から消えていく「rotateOut（回転退場）」アニメーションを簡単に実装できます。ここでは、@keyframesとanimationプロパティを組み合わせた基本的な実装例を紹介します。 実装例 以下のコードでは、画像を含む要素が10秒かけて200度回転しながらフェードアウトします。「Reload page」ボタンでページを再読み込みすると、アニメーションを何度でも確認できます。 <html>    <head>       <style>     &

  2. CSSでrotateOutUpRight（右上へ回転して退場）アニメーションを実装する方法

    CSSを使えば、要素が右下を軸として時計回りに90度回転しながら画面から消えていく「rotateOutUpRight（右上へ回転して退場）」アニメーションを簡単に実装できます。この記事では、@keyframesルールとtransform-originプロパティを組み合わせた具体的な実装例を紹介します。 rotateOutUpRightアニメーションの仕組み このアニメーションは、以下のCSSプロパティを組み合わせて実現します。 transform-origin：回転の軸となる基準点を指定します。ここでは「right bottom（右下）」を指定しています。 transform: rotate