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

CSSで作るフェードインアップアニメーションの実装方法

CSSを使えば、JavaScriptに頼ることなく、画像や要素をふんわりと浮かび上がらせる「フェードインアップ」アニメーションを簡単に実装できます。ポイントは、@keyframes で透明度（opacity）や位置（transform）の変化を定義し、animation プロパティでそれを要素に適用することです。

基本の仕組み

フェードインアップは、主に次の2つのCSS機能を組み合わせて実現します。

  • @keyframes： アニメーションの開始（0%）から終了（100%）までの状態を段階的に定義します。
  • animationプロパティ： アニメーション名、再生時間、塗りつぶしモード（fill-mode）などを指定します。

特に animation-fill-mode: both; を指定しておくと、アニメーション開始前から終了後までスタイルが保持されるため、ページ読み込み直後に要素が一瞬だけ表示される「チラつき」を防ぐことができます。

実装例：画像をフェードインで表示する

以下のコードでは、ロゴ画像が10秒かけて徐々に表示されます。「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 fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

</style>
</head>
<body>

<div id="animated-example" class="animated fadeIn"></div>
<button onclick="myFunction()">Reload page</button>

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

上方向への移動を加えるには

「フェードインアップ」として、下から上へスッと浮かび上がる動きを加えたい場合は、@keyframes の中で transform: translateY() を組み合わせます。

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

この例では、要素が40px下の位置・完全な透明状態からスタートし、再生とともに元の位置へ移動しながらフェードインします。移動距離や animation-duration の値を調整すれば、より繊細な演出も可能です。

ブラウザ対応について

-webkit- が付いた記述は、古いSafariなどWebKit系ブラウザ向けのベンダープレフィックスです。最近のモダンブラウザ（Chrome、Firefox、Edge、Safariなど）では標準の @keyframes と animation だけで問題なく動作しますが、できるだけ多くの環境をサポートしたい場合は、両方を併記しておくと安心です。

  1. CSSで実現するフラッシュ（点滅）アニメーション効果の作り方

    要素が突然、短い時間だけ明るく発光するように見える演出が「フラッシュ（Flash）」効果です。CSSのアニメーション機能を使えば、外部ライブラリや複雑なJavaScriptに頼ることなく、この点滅のような視覚効果を手軽に実装できます。フラッシュ効果の仕組みフラッシュ効果は、@keyframesルールで要素のopacity（不透明度）を一定のタイミングで切り替えることで実現します。以下の例では、0%・50%・100%の時点で不透明度を「1」（完全に表示）に、25%と75%の時点で「0」（完全に非表示）に設定しています。これにより、要素が素早く点滅し、フラッシュのような印象を与えます。コード例&l

  2. CSSでfadeOutUpBig（大きなフェードアウト）アニメーション効果を実装する方法

    CSSを使えば、JavaScriptに頼らなくても要素を画面の上方向へ大きく移動させながらフェードアウトさせる「fadeOutUpBig」アニメーションを簡単に実装できます。この効果は、画像やロゴ、バナーなどをスムーズに退場させたい場合に便利です。fadeOutUpBigアニメーションの仕組みこのアニメーションは、@keyframesルールで定義します。開始時点（0%）では要素は不透明度1・元の位置にあり、終了時点（100%）では不透明度0になりながら2000px上方向へ移動します。これにより、要素が大きく浮き上がるように消えていく演出が生まれます。主なプロパティのポイントanimation-