CSS トランジションはページ読み込み時にフェードイン効果を作成できますか?

CSS トランジションを使用したページ読み込み時のフェードイン効果の作成

テキストのフェード効果に CSS トランジションを使用できますかページの読み込み時?

このフェードインを実現するにはこの効果には、次の CSS ルールを組み込みます:

</p>
<h1 id="test-p">test p {</h1>
<p>margin-top: 25px;<br> font-size: 21px;<br> text-align: center;<br> 不透明度: 0;<br> トランジション: 不透明度2sease-in;<br>}<br>

ここで、読み込み時に遷移をトリガーするには、次のメソッドのいずれかを使用できます:

方法 1: CSS アニメーション (あまり普及していません)サポートされています)

</p>
<h1 id="test-p">test p {</h1>
<p>アニメーション: fadein 2s;<br>}</p>
<p>@keyframes fadein {<br> から { 不透明度: 0; }<br> から { 不透明度: 1; }<br>}<br>

方法 2: jQuery または JavaScript

ドキュメントのロード時に次の jQuery スクリプトを実行します:

<br>$("#test p").addClass("load");<br>

対応する CSS:

</p>
<h1 id="test-p">test p {</h1>
<p>トランジション: 不透明度 2s イーズイン;<br> 不透明度: 0;<br>}</p>
<h1 id="test-p-load">test p.load {</h1>
<p>不透明度: 1;<br>}<br>

方法 3 : jQuery の Deferred を使用するアニメーション

は、遅延と長さを設定してアニメーションをトリガーします:

<br>$("#test p").delay(1000).animate({不透明度: 1 }、 700);<br>

提供された応答で説明されているように、メソッドによって提供されるブラウザー間の互換性のレベルが異なる場合があることに注意してください。

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