stylesheet

CSSだけでフェードインアニメーション

ページヘッダーをフェードイン登場させたくて、CSSのアニメーションを毎回探すので覚書。

html

<div class="box fadeIn">ふわっ(その場で)</div>

css

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

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

ブックマーク

参考:ふわっと動く

あと今回の要件とは違ったけど、ページ開いたときにロゴをフェードインフェードアウトさせてからコンテンツを表示するときのやり方にも出会いまして(jQueryだけど)またいつかのときのためにブックマークしておく。
jQueryで最初にトップページを開いたときに画面全体やロゴをフェードさせる

  • この記事を書いた人

ゆず

忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
ko-fi / giftee / mail

-stylesheet