CSSのanimation-timelineを「発火」として使うスクロールアニメーション

「働いたら負け」を提唱するニートのように、「js使ったら負け」を提唱するデザイナーしてるワイ。
animation-timelineを使ってみて「おお、すげー！」と、初めは感動したものの、、、

ん〜、、（アニメーションが美しくない）と、違和感がブワーッと全身に広がりながら、
画面をゆっくりスクロールしたり、早めにスクロールしたり無意味な時間を10分ほど繰り返していました。
（何にも解消しない。乙）

やっぱスクロールは人が動かすので、どうしてもアニメーションの動きにムラがあって、
どうにかならんもんか〜と思って色々調べた結果、
jsばりにいい感じの実装ができたので忘備録として残しておく。

animation-timelineとは

まずanimation-timelineには2種類あって、

• ページのスクロール量に応じてアニメーションされるscroll()
• 画面に表示してからのスクロールタイミングでview()

今回はanimation-timeline: view();を使ったアニメーションをやってみた。

これをアニメーションの発火に使いたかったんですよね。
このcssで発火させて、あとはスクロールに関係なくアニメーションさせれば綺麗になるのではないかと！

結果、こんな感じになりました。

実装

まずは以下コードから（装飾のcssは省いています）

HTML

<div class="other">
  <div class="oya">
    <div class="kodomo">これがアニメーションします</div>
  </div> 
</div>

タグはこれだけ。
otherはスクロールするためのダミーなので、
実際に使うのは「oya」と「kodomo」です

CSS

/* 発火の記述は親タグに */
.oya {
  animation: trigger steps(1) forwards;
  animation-timeline: view();
  animation-range: cover 20% cover 30%;
}

/* 逆スクロールした時のアニメーション */
.kodomo {
  animation: slideUp-back 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards;
  opacity: 0;
}

/* 発火後のアニメーション */
@container style(--animate: true) {
  .kodomo {
    animation: slideUp 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards;
  }
}

/* 発火トリガー */
@keyframes trigger {
  to { --animate: true; }
}

/* アニメーション */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 上のアニメーションの逆、にしておくと巻き戻しみたいになる */
@keyframes slideUp-back {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}

/* 装飾用（すでにデザインある人は特にいらない） */
.other {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f2f1;
  width: 500px;
  height: 1000px;
  margin: 0 auto;
  padding-top: 500px;
}
.oya {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background: #b3b2b1;
}

解説

順に説明していくと、

.oya {
  animation: trigger steps(1) forwards;
  animation-timeline: view();
  animation-range: cover 20% cover 30%;
}

まず親にtriggerって名前のアニメーションをセット。step(1)は瞬時にアニメーションさせるっていう記述。forwardsはbothでもよい。（使いたい場面に合わせて変更してみて）

なので親のanimationは発火のためだけにあります。発火すると瞬時に変数の--animate: true;になるので、

--animate: true;になった時の.kodomoがアニメーション(slideUp)を発動。スクロールに関係なくアニメーションしてくれるというわけ。ここのアニメーションは好きなアニメーションにしてOK。

基本はここまで。

ここからはスクロールを戻した場合に、巻き戻しアニメーションいれる場合は.kodomoにアニメーションを入れておく。

.kodomo {
  animation: slideUp-back 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards;
  opacity: 0;
}

※animationいれない場合は瞬時に切り替わるよ。

基本的なベースはこんな感じなので好きにいじっちゃってくださいな。