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

CSSだけで実現！上からバウンドして登場する「bounceInDown」アニメーションの作り方

CSSの@keyframesを活用すると、JavaScriptに頼ることなく、要素が画面上部から跳ねながら登場する「バウンスインダウン（bounceInDown）」アニメーションを簡単に実装できます。ロゴやバナーを目立たせたいときに効果的な演出です。

以下のサンプルコードでは、背景画像として設定した要素が上空から落下し、一度バウンドしてから元の位置に静止する動きを作成しています。「Reload page」ボタンをクリックするとページが再読み込みされ、アニメーションを何度でも確認できます。

実装例（サンプルコード）

<!DOCTYPE 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: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

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

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

</html>

コードのポイント解説

1. アニメーションの基本設定（.animatedクラス）

animation-durationでアニメーションの全体時間を指定しています。サンプルでは10秒と長めに設定していますが、実際のサイトでは2秒前後の方が自然な印象になります。animation-fill-mode: bothを指定することで、アニメーション開始前・終了後もキーフレームの状態が保持されます。

2. キーフレーム（@keyframes bounceInDown）の仕組み

バウンス感は、進行度ごとに位置を細かく制御することで表現しています。

  • 0%： opacity: 0＋translateY(-2000px) — 要素は透明なまま、画面上部のはるか外側に配置されます。
  • 60%： opacity: 1＋translateY(30px) — 不透明になりつつ、目標位置より少し下（30px）まで落ちてきます。
  • 80%： translateY(-10px) — 地面に着いたように一度10px跳ね返ります。
  • 100%： translateY(0) — 元の位置に収まってアニメーション完了です。

この「行き過ぎ→戻る→静止」という段階的な動きが、物理的なバウンドのような自然な印象を生み出します。

3. ベンダープレフィックスについて

-webkit-付きの記述は、古いSafariなどWebKit系ブラウザ向けの互換性対応です。近年のモダンブラウザでは標準の@keyframesのみで動作しますが、幅広い環境をサポートしたい場合は両方を記載しておくと安心です。

まとめ

transform: translateY()とopacityを組み合わせたキーフレームを定義するだけで、軽量かつ滑らかなバウンスインダウンアニメーションが完成します。数値やanimation-durationを調整すれば、落ち方やバウンドの強さも自由にカスタマイズできるので、ぜひ自分のサイトに合わせて試してみてください。

  1. CSSで実現する「右下を基点に回転して登場する」アニメーション効果（rotateInDownRight）

    CSSを使えば、要素が画面の右下を基点として回転しながら登場する「rotateInDownRight」アニメーションを簡単に実装できます。このエフェクトは、@keyframesで回転角度と透明度を制御し、transform-originプロパティで回転の基点を指定するのがポイントです。 以下のコードを実行すると、ロゴ画像が右下を軸に90度傾いた状態からスタートし、徐々に正面へ回転しながらフェードインして表示されます。 実装例 <html>    <head>       <style>   &nbs

  2. CSSで左下を基点に回転しながら表示されるアニメーション（rotateInDownLeft）を実装する方法

    CSSを使えば、要素が左下を軸に回転しながらフェードインする「rotateInDownLeft」アニメーションを簡単に実装できます。この効果は、ロゴやバナーを目立たせたい場合などに活用できる定番の演出です。以下のサンプルコードを実行して、実際の動きを確認してみてください。 サンプルコード <html>    <head>       <style>          .animated {