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:
    アニメーション名を指定。任意でOK。「fadeIn」など、わかりやすいように。
  • animation-duration:
    1回のアニメーションが完了するまでの時間を設定。1sは1秒。
  • animation-timing-function:
    アニメーションが変化していく過程の速度を指定する。いわゆるイージング。
  • animation-delay:
    アニメーション開始の指定をする。0sはすぐに、1sなら1秒後に。
  • animation-iteration-count:
    アニメーションの回数を指定。1なら1回、2なら2回繰り返す。
  • animation-direction:
    アニメーションが動く方向を指定。normalは順方向。reverseは逆方向。
  • animation-fill-mode:
    アニメーション終了時の状態を指定。forwardsならkeyframesの100%の状態のまま。backwardsなら0%の状態に戻る。
  • animation-play-state:
    アニメーションが実行中が停止中かを指定する。

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

animationプロパティは一括指定も可能。

keyframesの0%はfrom、100%はtoでも代替可。

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

W3Schools

参考:CSS animation Property | W3Schools

MDN

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

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

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


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

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

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。