【CSS】Scroll-driven AnimationsとCSSの進化

## はじめに
![Slide 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f1206fb0-1b20-f258-2b58-9075a86295bf.jpeg)
この記事は、2023年12月1日に開催された[Meguro.css #9](https://megurocss.connpass.com/event/300400/)で発表した内容です。

## 内容
### 導入
![Slide 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f534eb5d-b955-f428-ef4c-a606a84071fe.jpeg)
こんにちは、私はQiita株式会社の出口 裕貴です。

普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。

---

![Slide 6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1d8768e4-15c4-a5a4-477a-9e8f7c95c1c3.jpeg)
早速ですが、みなさん Scroll-driven Animations（スクロール駆動アニメーション） はご存知ですか？

スクロール駆動アニメーションは、スクロール駆動アニメーションは、CSSでスクロールに合わせて要素をアニメーションさせることができる機能です。

私が、スクロール駆動アニメーションをはじめて触った時に、CSSの進化を感じ、
今日までに私はQiitaに3記事、スクロール駆動アニメーション　についての記事を投稿しています。

https://qiita.com/degudegu2510/items/9fa70a8b5284e37f2fe3

https://qiita.com/degudegu2510/items/8af66ccdfe3ccb227866

https://qiita.com/degudegu2510/items/eae9e32eeea9ac3a0abb

そんな私が、スクロール駆動アニメーションについて、話そうと思います。


### 話すこと
![Slide 7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e8c5c2b4-2e9d-7733-5e9e-0274a61afa8c.jpeg)
今日の発表では、スクロール駆動アニメーションの紹介と実装方法について話します。

今日の話を聞いて、皆さんが、スクロール駆動アニメーションについて理解して、興味を持っていただけると嬉しいです。

### スクロール駆動アニメーションについて、
![Slide 9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d4ff88d9-6be6-95a2-2e4a-e6bb7778c559.jpeg)

スクロール駆動アニメーションは、
**Scroll Progress Timeline** と **View Progress Timeline**
2種類アニメーションを管理する方法があります。

これから、それぞれについて説明していこうと思います。

### Scroll Progress Timeline
![Slide 10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d0887ba7-dd55-2f58-03aa-ec44a76f6e4f.jpeg)
Scroll Progress Timelineは、スクロールできるコンテナー全体の位置によってアニメーションを管理する方法です。

---

![Slide 11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/92e3c64f-07bf-306d-ac8a-a84580eb6f5e.jpeg)
Scroll Progress Timelineで、スクロール駆動アニメーションを実装するには、
アニメーションさせたい要素に

+ `animation-timeline: scroll();`
    + コンテナー全体をスクロールの基準にする
    + `scroll(スクロール要素 スクロール方向)`
+ `@keyframes anim { ... }`
    + アニメーションを定義する
+ `animation: anim linear;`
    + アニメーションとイージングを指定する

これらを記載することで実装できます。

---

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="RwvyZvg" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/RwvyZvg">
  meguro.css - sample 1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
スタイルを `scrollY`・`scrollX`を切り替えると、それぞれの挙動を確認できます！

### View Progress Timeline
![Slide 13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2a86a5dd-1b99-7b4e-8e07-980725c22bbf.jpeg)
View Progress Timelineは、スクロールできるコンテナーの見えるビューポートを基準にアニメーションを管理する方法です。

---

![Slide 14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/364d6d6e-5f41-1ab8-5c32-2efa219b8bd6.jpeg)
View Progress Timelineで、スクロール駆動アニメーションを実装するには、
アニメーションさせたい要素に

+ `animation-timeline: view();`
    + ビューポートをスクロールの基準にする
    + `view(スクロール方向 inset値)`
+ `@keyframes anim { ... }`
    + アニメーションを定義する
+ `animation: anim linear;`
    + アニメーションとイージングを指定する
+ `animation-range: cover 0% cover 100%;`
    + アニメーションするの範囲を指定する

これらを記載することで実装できます。

---

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="LYqmzBO" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYqmzBO">
  View Progress Timeline</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
スタイルを `cover`・`entry`・`exit`・`entry-crossing`・`exit-crossing`・`contain`を切り替えると、それぞれの挙動を確認できます！

### サンプル
![Slide 16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/55efe8a0-68a6-c691-c03f-0e66d1b9cd35.jpeg)
これらのスクロール駆動アニメーションを使いこなすと、今まで、JavaScript等で使っていたような表現がCSSだけで、簡単になります！

---
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="oNmdpqb" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/oNmdpqb">
  Scroll Driven Animations - parallax</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
パララックスも簡単に作れます！

---
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="abXGEQz" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/abXGEQz">
  meguro.css - sample 2</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
横スクロールしながら、スタイルを変えることも簡単にできるようになります！

### 対応ブラウザ
![Slide 19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/51860918-ffdf-2692-27a7-426f4cc3ed22.jpeg)
スクロール駆動アニメーションは、まだまだ対応しているブラウザは少ないので、確認の上お使いください。

## まとめ
![Slide 20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c4aedf49-3bc0-6393-937d-fc75a5cb3935.jpeg)

今日は、スクロール駆動アニメーションについて紹介しました。
まだまだ、使えるブラウザが少ないですが、これからのCSSが変わってくる大きなアップデートになると思います。

最後に、スクロール駆動アニメーションがリリースされる日を気長に待ちましょう！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510