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で最初にトップページを開いたときに画面全体やロゴをフェードさせる