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

CSSでbounceOutRight（右方向バウンス）アニメーションを実装する方法

CSSの@keyframesとanimationプロパティを組み合わせることで、要素が一度左に引っ張られた後、右方向へ大きく跳ね出しながらフェードアウトしていく「bounceOutRight」アニメーション効果を簡単に実装できます。

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

このアニメーションは、以下の3つの段階で構成されています。

  • 0%： 要素は初期位置（translateX(0)）に配置されます。
  • 20%： 要素が少し左（-20px）に移動し、不透明度は1（完全に表示）を維持します。これにより「ため込む」ような予備動作が生まれます。
  • 100%： 要素が画面の右側へ大きく移動（2000px）し、同時に不透明度が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 bounceOutRight {
   0% {
      -webkit-transform: translateX(0);
   }
   20% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
   }
   100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
   }
}

@keyframes bounceOutRight {
   0% {
      transform: translateX(0);
   }
   20% {
      opacity: 1;
      transform: translateX(-20px);
   }
   100% {
      opacity: 0;
      transform: translateX(2000px);
   }
}

.bounceOutRight {
   -webkit-animation-name: bounceOutRight;
   animation-name: bounceOutRight;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceOutRight"></div>
<button onclick="myFunction()">Reload page</button>

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

コードのポイント解説

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

-webkit-プレフィックス付きの記述を併記することで、古いSafariやChromeなどWebKit系ブラウザでも正しく動作します。近年のモダンブラウザでは標準の@keyframesのみで十分な場合が多いですが、幅広い環境をサポートしたい場合は両方を定義しておくと安心です。

2. animation-duration と fill-mode

animation-duration: 10s;でアニメーション全体の所要時間を10秒に設定しています。また、animation-fill-mode: both;を指定することで、アニメーションの開始前・終了後もキーフレームのスタイル状態が保持され、終了時に要素が確実に非表示のままになります。

3. 予備動作による「バウンス感」の演出

20%の時点で一度左へ移動させるのがこのエフェクトのポイントです。この一瞬の「逆方向への引き」があることで、単純にスライドアウトするだけではなく、ゴムを引っ張って離したような弾む動きが表現できます。

移動距離や所要時間、中間地点（20%）の位置を調整すれば、より軽快なバウンスやゆったりとした演出など、さまざまなバリエーションに応用できます。

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

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

  2. CSSで実現する「右下を支点に回転しながら消える」アニメーション効果の作り方

    CSSのアニメーションを使えば、要素を右下（right bottom）を支点として回転させながらフェードアウトさせる演出が簡単に実装できます。この効果は一般的に rotateOutDownRight と呼ばれ、要素が画面から消える際の退場アニメーションとしてよく活用されます。rotateOutDownRightアニメーションの仕組みこのアニメーションでは、以下のCSSプロパティが重要な役割を果たします。transform-origin: right bottom; … 回転の基準点を要素の右下に設定します。transform: rotate(-90deg); … 要素を反時計回りに90度回転さ