CSS、jQuery、またはその両方を使用して、ページ読み込み時にスムーズなフェードイン テキスト アニメーションを作成するにはどうすればよいですか?

CSS を使用してページ読み込み時にフェードイン アニメーションを作成する

問題: スムーズにフェードインするテキスト段落を作成することで、Web サイトの美しさを向上させます。ページloads.

解決策:

CSS アニメーションの使用

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  animation: fadein 2s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

• このソリューションを CSS アニメーションで実装し、最新のすべてのブラウザとの互換性を確保します。 .

を使用するjQuery

$("#test p").addClass("load");

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

• jQuery を使用して、CSS トランジションを介してフェードインをトリガーするページの読み込み時にクラスを追加します。

DotMail のアプローチをエミュレートします

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

• で採用されているフェードイン効果を模倣します。 jQuery 遅延とアニメーションの組み合わせによる DotMail。

ブラウザ互換性:

• CSS アニメーション: 最新のブラウザとインターネットExplorer 10
• CSS移行: 最新のブラウザーと Internet Explorer 10
• jQuery (方法 2 および 3 に必要): バージョンによって異なりますが、通常は古いブラウザーと相互互換性があります。

ブラウザのサポート要件と必要なアニメーションのレベルに最も適した方法を選択してくださいカスタマイズ。

以上がCSS、jQuery、またはその両方を使用して、ページ読み込み時にスムーズなフェードイン テキスト アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。