この記事では以下を提供します。
方法 1: CSS の「animation」プロパティを使用したフェードイン効果
シンプルな HTML ページをデザインするには、次の要素を追加します。
- 「」を追加 」要素と「 スタイル ' 属性。 「style」属性には、要素のスタイリング プロパティが含まれます。
- 「を適用します。 色 要素のテキストの色を定義するには、style 属性の ” プロパティを使用します。
- その後、「 」要素を使用して、テキストまたは簡単な段落を追加します。
以下は HTML コードです。
< h2 スタイル = 「色: rgb(84, 8, 191)」 >
Linuxhint チュートリアル Web サイト
< / h2 >
< p > ページ読み込み時のフェードイン効果 < / p >
HTML ページが正常に作成されました。
CSS セクションで、ページにフェードイン効果を適用するには、「 アニメーション 」 CSS プロパティは「 <本体> 」 HTML ページの要素。
スタイル「body」要素
体 {アニメーション: fadeInPage イーズ 3s;
アニメーション反復回数: 1 ;
}
「
」には、次の CSS プロパティが適用されます。- 「 アニメーション 」は、複数の値を指定してアニメーションを設定する省略形のプロパティです。ここでは、アニメーション名、animation-timing-function、および animation-duration が定義されています。
- 「 アニメーション反復回数 」は、アニメーションを反復する回数を定義します。
「アニメーション」に「@keyframes」ルールを適用する
@keyframes フェードインページ {0 % {
不透明度: 0 ;
}
100 % {
不透明度: 1 ;
}
}
「を定義するには @キーフレーム アニメーションのルールについては、@keyframes キーワードの後にアニメーション名を記載してください。アニメーションの動作を次のように変更します。
- で ' 0% 「アニメーション、」 不透明度 ” プロパティには値 0 が割り当てられます。これは、アニメーションの開始時に画像が透明であることを意味します。
- で ' 100% 」アニメーション、不透明度は「 1 」、これは単色を指します。
出力
ページの読み込みにフェードイン効果を適用する 2 番目の方法に進みましょう。
方法 2: CSS の「transition」プロパティを使用したフェードイン効果
「」を追加 オンロード 「」内の属性 <本体> ' エレメント。このイベントは、ページの読み込み時にトリガーされます。ロード時に、ボディ要素の不透明度は「 1 」、これは単色に関連しています。
< 体 オンロード = 'document.body.style.opacity='1'' >この例では、CSS「 遷移 」プロパティを使用して、フェードイン効果を追加します。
体 {不透明度: 0 ;
トランジション: 不透明度 6s;
}
以下は、上記のプロパティの説明です。
- 「 不透明度 」プロパティは、要素の透明度を定義します。
- CSS の使用 遷移 」、指定された時間にわたってプロパティの値を徐々に変更します。
出力
ページ読み込み時のフェードイン効果に CSS を使用する方法を説明しました。
結論
いくつかの CSS プロパティを利用して、HTML 要素にフェードイン効果を適用できます。より具体的には、「 アニメーション 」、「 不透明度 '、 と ' 遷移 」プロパティを使用して、ページまたは要素のアニメーション効果を指定できます。アニメーションは「 @キーフレーム 」 ルール。この記事では、CSS を使用してページ読み込み時にフェードイン効果を追加する方法について説明しました。