CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSアニメーションでフェードイン。
数年前までは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;
}
}
animationプロパティについて。
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の補足。
- animationプロパティは一括指定も可能。
- 一括指定の場合は値を半角スペースで区切って指定。省略されたプロパティは初期値。
- keyframesの「0%」は「from」、「100%」は「to」でも代替可。
例）
CSS
html {
animation: fadeIn 4s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
アニメーションの動作確認ができる参考サイト。
また、各プロパティの詳細は下記のサイトが参考となる。（英語が多いが、翻訳機能を利用すると大体読み解ける。）
W3Schools
参考：CSS animation Property | W3Schools
MDN
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
