CSSでフワッとアニメーション

CSS

ページ読み込み時にフワッとロードする方法

via GIPHY

数行のCSSで達成することができる

<body>
  <div id="header1">
    <h1>Header 1</h1>
    <p>Some text</p>
  </div>
   <div id="header2">
    <h1>Header 2</h1>
    <p>Some text</p>
  </div>
   <div id="header3">
    <h1>Header 3</h1>
    <p>Some text</p>
  </div>
</body>

こういうHTMLがあるとします。

@keyframes fadeIn {
  0% {
      opacity: 0
  }
  100% {
      opacity: 1
  }
}
#header1{
  animation: fadeIn .3s ease-in 0s 1 normal;
}
#header2 {
  animation: fadeIn .9s ease-in 0s 1 normal;
}
#header3 {
  animation: fadeIn 1.5s ease-in 0s 1 normal;
}

Divごとにアニメーションの速度を設定します。 全体をフワッとさせたければBodyに追加すればOKです。

keyframeで動きの変化を指定

@keyframeとはアットルールの一種でCSSの動作を規定するものです。 上述のCSSの0%と100%をそれぞれfromとtoに変換することもできます。FadeInはアニメーショの定義名です。

animation

animation: fadeIn .3s ease-in 0s 1 normal;

↓

animation: 定義名 変化時間 進行具合 ループ 交互に反対再生させるか;

参照