CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

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

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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 / アニメーション1回の時間。
  • 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

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

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

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


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

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。