CSS トランジションまたはアニメーションは、ページ読み込み時にテキストのフェードイン効果を作成できますか?

CSS を使用してページ読み込み時にテキスト段落フェードインをアニメーション化する

質問:

CSS トランジションを活用してページとしてのテキスト段落のフェードイン効果ロード?

説明:

CSS トランジションを使用すると、指定された期間にわたって要素を 1 つのスタイルから別のスタイルにスムーズに遷移できます。このプロパティを不透明度プロパティに適用すると、フェードイン効果が有効になります。

方法 1: CSS アニメーション

自己呼び出しトランジションの場合は、CSS アニメーションの方が適しています。これらは、この目的のために特別に設計された専用のアニメーション構文を提供します。

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

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

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

ブラウザのサポート:

• すべての最新ブラウザ
• Internet Explorer 10

方法 2: クラスを使用した CSS 遷移トグル

または、クラス トグルを使用して CSS トランジションをトリガーできます:

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

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

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

ブラウザ サポート:

• すべて最新のブラウザ
• Internet Explorer 10

方法 3: jQuery を使用したアニメーション

ブラウザ間の互換性を確保するために、jQuery を使用して不透明度の変更をアニメーション化できます:

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

。郵便方法:

[DotmailApp](http://dotmailapp.com/) は、効果を高めるためにわずかな遅延を伴う同様の方法を使用します。ただし、この手法には、より広範なブラウザーをサポートする jQuery 2.x が必要です。

以上がCSS トランジションまたはアニメーションは、ページ読み込み時にテキストのフェードイン効果を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。