読み込んだ際にふわっとコンテンツが浮き上がるようなアニメーションを実装したい

Question

###困っていること
http://uni-mafumafu.jp/news/のように読み込んだ際に記事がふわっと浮き上がるようなモーションを実装しようと思っています。

jQueryを利用して、load時にanimateを呼び出して記事部分の<div>のmargin-topを適当な値から0にアニメーションさせれば良いのでは？と思いましたが、それだと下部にあるページネーションやフッターもそれに合わせて浮き上がるという挙動になってしまいます。

記事部分だけを浮き上がるようにするにはどうしたらいいのでしょうか？

Answer 1

animation-delay, animation-play-state プロパティの初期値より、アニメーションが適用されるとその 0 秒後にアニメーションが開始されます。よって、記事部分の要素に対して「下から上へ移動するとともに不透明度が増大する」アニメーションを適用することで質問者さんの実現したいことが行えます。要素の移動と不透明度は transform プロパティと opacity プロパティで制御出来ます。

以上より、質問者さんの行いたいことは以下のような方針で実現出来ると思います (動作確認用リンク)。

<div class="container">
  <header></header>
  <section>
    <ul class="fadeInUp">
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
      <li>
        <a>記事</a>
      </li>
    </ul>
  </section>
  <footer></footer>
</div>

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-rows: 20vh auto 20vh;
  overflow: hidden;
}

.fadeInUp {
  animation: fadeInUp 2s;
}

.fadeInUp > li {
  border: solid #000;
  background: #aff;
  height: 3em;
}

.fadeInUp > li + li {
  margin-top: .5em;
}

header {
  background: #ffa;
}

section {
  background: #faf;
}

footer {
  position: relative;
  background: #faa;
}


@keyframes fadeInUp {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Comments

[s8_chu]

もしアニメーションの発火タイミングを厳格に制御したい場合は、 JavaScript の `load`, `DOMContentLoaded` イベントなどを通して `.fadeInUp` クラスを適用する必要があります。

- https://jsfiddle.net/zb5dkou0/
- https://jsfiddle.net/9of7e0s6/

[sodiumplus3]

jQueryを使わずとも@keyframesとanimationでこのような実装ができるのですね！
目から鱗でした！ありがとうございます