CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。 / メモ / いがわ

CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。

2022.10.22 2024.08.29更新。

Contents - 目次

1 CSSでフェードインできる、animationプロパティ。
2 CSS animationプロパティについて。
3 CSSアニメーションの動作確認ができる参考サイト。
4 CSS 関連メモ。

CSSでフェードインできる、animationプロパティ。

CSSだけでフェードイン。JavaScript不要。

フェードインがCSSのanimationで実装できるように。

数年前まではJavaScriptやjQueryプラグインで実装していた、Webサイトのフェードイン。

サイト訪問時にちょっとリッチな雰囲気を醸し出すフェードインは、今ではすっかりCSSだけで表現が可能となった。

シンプルなフェードインは、汎用性もある。

例えば、htmlセレクタに下記CSSをコピペするだけでOK。（値は変更可。）

例）

CSS

html {
 animation-name: fadeIn;
 animation-duration: 4s;
 animation-timing-function: ease-in-out;
}

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

CSS animationプロパティについて。

animationプロパティについての補足。

フェードインだけでなく、animationプロパティはUI/UXデザインにも効果的。

animationは慣れたらめっちゃ便利で、ところどころで使いたくなる。UI/UXデザインにも直結するプロパティ。

animation-name / アニメーションの名前。
animation-duration / アニメーション１回の時間。
animation-timing-function　 / アニメーションの進行速度。いわゆるイージング。
animation-delay / アニメーションが開始するまでの時間。
animation-iteration-count / アニメーションの繰り返し回数。
animation-direction / アニメーションの再生方向。
animation-fill-mode / アニメーションの実行前後のスタイル。
animation-play-state / アニメーションが実行中か一時停止中か。

animationとkeyframesの補足。

プロパティの一括指定や、keyframesの書き方はいくつかあるので、自分が覚えやすいもの、共同作業者がいる場合は、共通のルールを作っておいた方が効率が良くなる。

animationプロパティは一括指定も可能。
一括指定の場合は値を半角スペースで区切って指定。省略されたプロパティは初期値。
keyframesの「0%」は「from」、「100%」は「to」でも代替可。

例えば、以下の書き方はどちらでもOK。（コピペ可。値も変更可。）

例）

CSS

html {
 animation-name: fadeIn;
 animation-duration: 4s;
 animation-timing-function: ease-in-out;
}

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

CSS

html {
 animation: fadeIn 4s ease-in-out;
}

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

CSSアニメーションの動作確認ができる参考サイト。

animationプロパティの詳細について。

また、各プロパティの詳細は下記のサイトが参考となる。（英語が多いが、翻訳機能を利用すると大体読み解ける。）

W3Schools

参考：CSS animation Property | W3Schools

MDN

参考： animation – CSS: カスケーディングスタイルシート | MDN

CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。