2020年中期のWebアニメーション実装の全容と方法70選

# 概要

Webページでアニメーションを実装しようとしたときに、どんな方法があるのかまとめる。
今回は「実装したい特定のアニメーションにとって良い方法とは」ではなく、Webのアニメーション全般に対する知見を深める目的。
このアニメーションどうしようかなと思ったときに見返せるように。

- 方法
- 参考リンク
- 特徴のコメント
- 実際の例

などを書く構成になっています。

パッとググって出てくるライブラリは網羅したはず。
ライブラリの細かい使い方についてはそれぞれ紹介している記事がいっぱいあるので、ここでは特徴をメモ程度に。
スター数や最終更新日は執筆時点のもので、こまめに更新する予定はありません。
目安程度で実際の値は実際にGitHubをご確認ください。

パフォーマンスについてはスコープ外です。

# アニメーションの調査方法について

既存サービス/サイトのアニメーションに何が使われているか調べる方法としてChrome devtoolsにAnimationという機能があります。

![スクリーンショット 2020-07-18 17.19.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/7d063125-21b1-1ff8-ab35-fff73ea8dfe3.png)
（Animationsが出ていない場合は左の3点メニューから選ぶ）

これを開いた状態でページでアニメーションが発生すると、アニメーションを保存してくれます。

<img width="1190" alt="スクリーンショット_2020-07-18_19_46_46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/e8dc4587-03ab-52f5-9a32-5e68dc4ca5c8.png">

アニメーションが発生している要素はどれか判別したり、再生スピードを遅くして再生したりすることができます。

## DOM Breakpoints

さらに、例えばTwitterのいいねの場合、アニメーションするハート要素がアニメーションが始まると同時に追加され、終わると同時に消えます。
そうすると上の画像のように要素が存在しないためセレクタの色が灰色になり押しても要素が見つけられません。

そこでDOM Breakpointsが使えます。
DOM Breakpiontsはコードのブレークポイントと同じで、DOMの変化をステップ実行できる機能です。
Twitterのいいねの例で言えば、アニメーション時に追加される要素の親要素にブレークポイントを設定すると、アニメーション発生時にステップ実行することができます。

<img width="410" alt="スクリーンショット 2020-07-18 19.53.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/fc3f7e00-881f-8eb0-654e-2fc927537eae.png">
今回は子孫要素への変更なので、subtree modificationsを選びます。

Animationsを開いた状態でDOM Breakpointsありで実行すれば、すぐに消えてしまう要素もじっくり観察することが出来ます。


# Webのアニメーション実装の3分類

ここから本題。

1. 動画ファイルを使う
2. CSSを使う（画像使うことも）
3. JSを使う（画像・CSSを使うことも）

上がより静的、下がより動的なイメージ。
基本はこれしかないものの、この中でも非常に多彩な方法が編み出されてる。

# 方法

## 動画ファイルを使う編

素材が用意できれば一番簡単。
実際のDOM要素をアニメーションさせたい時には使えない。

- ちょろっとした部品っぽい要素
- 他の要素に依存しない要素

に向いてる。

### GIFファイルを使う

ローディングインジケータ（ロード中のぐるぐる）とかはありがちですね。
例えばGitHubのローディングインジケータはGIF画像です。

（CSSを切って画像だけを表示した状態）:arrow_down:
![github-li.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/34c03149-ecdd-f1d1-c5ea-d773534bd28a.gif)

ほぼ対応してるので対応しているブラウザのことを考えなくて良いのは非常に大きなメリット。

### WebPファイルを使う

[WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし \- アイデアマンズブログ](https://blog.ideamans.com/2020/06/safari14-webp.html)

そろそろSafariも対応するらしいので、仕様の強さから言ってもう全部（実写系も色数少ない系もアニメーションも）WebPにしてくれ〜という感じ。
今はまだ後方互換を考えないといけないけど。

画像の後方互換を考える時には、`picture`タグが使える。
[\<picture>: 画像要素 \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture)

```html
<!-- MDNのページよりコピペ -->
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>
```

`picture`タグは`img`要素の`src`属性の値を条件に従って変更する要素。
`source`の`type`にフォーマットを指定することで、それが対応しているブラウザの場合はそれが読まれる。
この`picture`タグは[IE以外主要ブラウザで対応している]([Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=picture))ので、基本的にwebpを用意しない技術的な理由はないはず！

### APNGファイルを使う

[Animated PNG graphics \| MDN](https://developer.mozilla.org/ja/docs/Animated_PNG_graphics)
[Animated PNG - Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=apng)

Animated PNGの略。
GIFの次世代として開発された。IE以外は対応している。
透過が扱えたり扱える色数が多かったり。

[APNGでイラストやアイコンを動かそう！～AdobeAnimateの使い方～ – 東京のホームページ制作 / WEB制作会社 BRISK](https://b-risk.jp/blog/2020/02/apng/)

WebPとAPNGの歴史について：[アニメーション画像の歴史 APNG\-WebP戦争 \| 味わい尽くせ！](http://gurochoro.blogspot.com/2017/03/history-apng-webp-war.html)
面白いですね、WebPも全ブラウザで対応になった今、APNGはこれからは先細りかなー

### WebMファイルを使う

[HTML の音声と動画のメディア形式 \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)
[WebM - Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=webm)

動画コーデックとしてVP8・VP9、音声コーデックとしてVorbis・Opusが使用できるコンテナ。
動画では珍しく背景透過に対応しているが、Safariが対応していない。
あまり話題に上がらない気がする。

### MP4ファイルを使う

お馴染みの動画コンテナ。背景透過はできない。
`video`タグの`playsinline`属性と`muted`属性を使うことでいわゆる動画プレイヤーではなくGIFのようにインラインで再生できるが、例えばiPhoneのコントロールセンター（上とか下とかからスワイプで出てくるメニュー）はWebページ内でMP4が再生されているとシーカーが表示してしまうことに注意。

[\<video>: 動画埋め込み要素 \- HTML: HyperText Markup Language \| MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video)

## CSSを使う編

### `animation`や`transition`プロパティのみを使う

CSSではプリミティブで非常にベーシックな方法。
パッと思いつく軽量なアニメーション（単純に要素を移動させるなど、いくつかのプロパティの値を一定規則で変化させれば表現できるもの）はこれだけでも実現可能。

### SVGをCSSでアニメーションさせる

SVGにも、`animation`や`transition`が使える。

- 参考
    - [UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ \- ICS MEDIA](https://ics.media/entry/15970/)

### SVGをSMILでアニメーションさせる

マークアップのみで完結するので手軽。
ただし一度Chromeで非推奨になりかけたりしているようなので、あえて使うメリットはそこまで感じられない。
[【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう！ \| webico blog](https://blog.webico.work/svg02#i-9)

- 参考
    - [SVG animation with SMIL \- SVG: Scalable Vector Graphics \| MDN](https://developer.mozilla.org/ja/docs/Web/SVG/SVG_animation_with_SMIL)
    - [UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ \- ICS MEDIA](https://ics.media/entry/15970/)
    - [Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=svg-smil)
        - <img width="1336" alt="スクリーンショット 2020-07-18 16.28.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/30f7af12-96e8-3486-5353-264f304f4744.png">


### CSSスプライト + `steps`

- CSSスプライト
    - 細かい画像を一つの画像ファイルに結合して、表示位置と表示領域を変えることでそれぞれの画像を表示する手法。HTTPリクエストが1回で済むのでオーバーヘッドが少なく速度などパフォーマンス改善のために行われる。

- `steps`
    - CSSにおける`steps`とはタイミングファンクションの一種。
        - [\<timing-function> - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/timing-function#Timing_functions)
        - タイミングファンクションとは、プロパティに指定する値を一定の規則に従って変化させることができるもの。
            - `ease`系は馴染みがあるでしょうか。
                - <img width="275" alt="スクリーンショット 2020-07-18 13.17.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/d421cea3-9286-9b32-c18c-b7ce33eeb80a.png">

        - `steps`はその中でも、**指定した値ごとに階段状に変化していく関数。**
            - <img width="707" alt="スクリーンショット 2020-07-18 13.18.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/75c64483-3696-da90-9d8c-73850c271b13.png">

この二つを組み合わせると、画像とCSSだけでパラパラ漫画の仕組みでアニメーションを実装できる。

例えばTwitterのいいねのアニメーションはこの方法を使用している。
[Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた](https://nelog.jp/twitters-fave-animation)

現在のいいねの実装はこちらの記事ともまた少し変わっていて、

<img width="1789" alt="スクリーンショット 2020-07-18 16.18.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/f18a4834-85f4-9a19-4e7d-2fc634e3355f.png">
https://abs.twimg.com/responsive-web/web/heart_animation.5c9f8e84.png

パーティクルのアニメーションはCSSスプライト + `steps`を使い、赤いハート部分はSVGをCSSでアニメーションさせる混合技になっていました。

- 参考
    - [スプライトアニメーションを使った最近のウェブデザイントレンド \| その他 \| つみきブログ](https://blog.tsumikiinc.com/article/20150409_website-trend-use-sprite-animation.html)
        - リンク切れ色々あるけど、 https://demodern.com/ こちらのサイトのスプライトは理解しやすい。
        - <img width="400" alt="スクリーンショット 2020-07-18 16.43.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132179/267cb1fb-4ab5-027c-7c1f-1c35bfb8b4c1.png">

### CSSライブラリ

ここからはCSSライブラリ。
任意の要素にクラスを付与するだけでアニメーションを実装できる。
もちろん、動的にアニメーションの再生を制御したい場合は、任意のタイミングでのjsによるクラスの追加/削除の処理を書く必要はある。

#### Animate.css

[Animate\.css](https://animate.style/)
[animate\.css/ at master · animate\-css/animate\.css](https://github.com/animate-css/animate.css?files=1)

|        |        |
|:-----------------|------------------:|
| スター数             |              67.4k |
| 最終更新日             |              8日前 |

パワポのアニメーションみたいなのを簡単に実装できる。
知名度的に言っても、まずは自分が実装したいアニメーションがこれにあるかどうか確認すると良さそう。
公式サイトで動きを確認できる。

#### HoverCSS

[Hover\.css \- A collection of CSS3 powered hover effects](https://ianlunn.github.io/Hover/)

|        |        |
|:-----------------|------------------:|
| スター数             |              23k |
| 最終更新日             |              5日前 |


マウスをホバーさせた時のアニメーションを簡単に実装できる。
主にクリッカブルなボタンなどに使う想定。
基本的なホバー系のアニメーションが実装したかったらまずはこれを確認。
公式サイトで動きを確認できる。

#### imagehover.css

[Imagehover\.css \- A Pure CSS Image Hover Effect Library \| imagehover\.css](https://www.imagehover.io/)
[ciar4n/imagehover\.css: Pure CSS Image Hover Effect Library](https://github.com/ciar4n/imagehover.css/)

|        |        |
|:-----------------|------------------:|
| スター数             |             1.5k |
| 最終更新日             |              1年前 |

こちらもマウスホバー時のアニメーションだが、画像に関するアニメーション特化。
フリーで使用できるエフェクトに加えて、有料でさらに購入することもできる。
公式サイトで動きを確認できる。

#### Magic

[Magic Animations CSS3](https://www.minimamente.com/project/magic/)
[miniMAC/magic: CSS3 Animations with special effects](https://github.com/miniMAC/magic)

|        |        |
|:-----------------|------------------:|
| スター数             |             6.6k |
| 最終更新日             |              8日前 |

ちょっと見たことないようなin/out系のアニメーションが豊富。
変わった立体的なアニメーションなどもあるので、公式サイトで確認しよう。

#### CSShake

[CSShake](https://elrumordelaluz.github.io/csshake/)
[elrumordelaluz/csshake: CSS classes to move your DOM\!](https://github.com/elrumordelaluz/csshake)

|        |        |
|:-----------------|------------------:|
| スター数             |             4.2k |
| 最終更新日             |              5日前 |

震える系アニメーション。
公式サイトを見ていると思わず笑ってしまう、めっちゃ震えている。

#### cssanimation.io

[CSS Animation Library for Developers and Ninjas \- cssanimation\.io](http://cssanimation.io/)
[yesiamrocks/cssanimation\.io: CSS Animation Library for Developers and Ninjas](https://github.com/yesiamrocks/cssanimation.io)

|        |        |
|:-----------------|------------------:|
| スター数             |             152 |
| 最終更新日             |              7ヶ月前 |

かなり変わったアニメーションがかなりたくさん含まれている。
使いこなすのは難しいが、ああそれね、みたいなありきたりなアニメーションに飽きた方は是非見て欲しい。

#### Tuesday

[https://shakrmedia\.github\.io/tuesday/](https://shakrmedia.github.io/tuesday/)
[shakrmedia / tuesday：Shakrによる風変わりなCSSアニメーションライブラリ](https://github.com/shakrmedia/tuesday)

|        |        |
|:-----------------|------------------:|
| スター数             |             434 |
| 最終更新日             |              1ヶ月前 |

quirky な（奇妙な、風変わりな）CSSライブラリ。in/out系が多い。
quirky と言いつつ割とよく見るアニメーションが含まれていて、特徴としてはアニメーションの持続時間が短いこと。
既存のアニメーションのCSSライブラリが持続時間が長いことに違和感を覚え作成されたそう。

#### Wicked CSS

[Wicked CSS3 Animations](http://kristofferandreasen.github.io/wickedCSS/)
[kristofferandreasen/wickedCSS: A library for CSS3 animations\. The animations are more vibrant than most simple animations\.](https://github.com/kristofferandreasen/wickedCSS)

|        |        |
|:-----------------|------------------:|
| スター数             |             263 |
| 最終更新日             |              5年前 |

こちらも同様に基本的なアニメーションが含まれている。
公式サイトの動くキノコがつぶらな瞳をしている。

#### Hamburgers

[Hamburgers by Jonathan Suh](https://jonsuh.com/hamburgers/)
[jonsuh/hamburgers: Tasty CSS\-animated Hamburgers](https://github.com/jonsuh/hamburgers)

|        |        |
|:-----------------|------------------:|
| スター数             |             5.9k |
| 最終更新日             |              2年前 |

ハンバーガーメニューのアイコンをタップした時のアニメーション。
ハンバーガーメニューでアニメーションしたければとりあえず覗いて見ると良さそう。

## JSを使う編

以降はライブラリのリスト。

### Web Animations API

[Web Animations API を利用する \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
[Animation API - Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=animation)

今までCSSの`animation`で実装していたものをjsで実装できるようにする仕様。
だいたいのブラウザで対応済み。
CSSでのアニメーションと違って、タイミングや終了イベントなど細かい制御がjsで可能になる。
標準が好きな方はまずこちら。

polyfillもあるので一応紹介。

[Web Animations Demos](https://web-animations.github.io/web-animations-demos/)
[web\-animations/web\-animations\-js at 866e01726cf61ffeabad2baa7f6c10e3cadee138](https://github.com/web-animations/web-animations-js/tree/866e01726cf61ffeabad2baa7f6c10e3cadee138)

|        |        |
|:-----------------|------------------:|
| スター数             |             3.4k |
| 最終更新日             |             3年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

### 汎用系

#### Anime.js

[anime\.js • JavaScript animation engine](https://animejs.com/)
[juliangarnier/anime: JavaScript animation engine](https://github.com/juliangarnier/anime/)

|        |        |
|:-----------------|------------------:|
| スター数             |             36.1k |
| 最終更新日             |             4ヶ月前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

CSS、要素、SVGなどをいい感じに変化させてアニメーションを実装できる。
軽量で、シンプルなAPIを持つ。
とりあえず凝ったアニメーション作りたくなったら使いたい。

#### GreenSock GSAP（Tweenmax）

[GSAP \- GreenSock](https://greensock.com/gsap/)
[greensock/GSAP: GreenSock's GSAP JavaScript animation library \(including Draggable\)\.](https://github.com/greensock/GSAP)

|        |        |
|:-----------------|------------------:|
| スター数             |             11.1k |
| 最終更新日             |             3日前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |
| ライセンス             |             **not MIT** |

数年前のアニメーションライブラリのデファクトスタンダード的存在。
[CSS Versus JavaScript Animations  \|  Web Fundamentals](https://developers.google.com/web/fundamentals/design-and-ux/animations/css-vs-javascript)
> Alternatively, if you're already using a JavaScript framework that includes animation functionality, such as via jQuery's .animate() method or GreenSock's TweenMax, then you may find it more convenient overall to stick with that for your animations.

Googleのドキュメントでも言及されていることからデファクト感が伺える。

ただし、ライセンスがMITではないことに注意。
[ライセンス\-GreenSock](https://greensock.com/licensing/)
基本は無料だが、サイト上で何らかの有料課金が存在する場合は有料ライセンスが必要。

#### Kute.js

[KUTE\.js \| JavaScript Animation Engine](https://thednp.github.io/kute.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |            2k  |
| 最終更新日             |         18日前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

汎用的で高機能なアニメーションライブラリとしてのポジション。
スター数の少なさが少し気にかかるか。
2,3年前に話題に上がって以来あまり言及が見当たらない。

#### Lottie

[Lottie](https://airbnb.design/lottie/)
[airbnb/lottie\-web: Render After Effects animations natively on Web, Android and iOS, and React Native\. http://airbnb\.io/lottie/](https://github.com/airbnb/lottie-web)

|        |        |
|:-----------------|------------------:|
| スター数             |            21.4k  |
| 最終更新日             |         2日前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |


AirBnB製で、After EffectsのアニメーションをサクッとWeb上に実装できる。
マルチプラットフォームなので、Web以外でも使える。

#### CreateJS

[CreateJS \| A suite of JavaScript libraries and tools designed for working with HTML5](https://createjs.com/)
[CreateJS](https://github.com/CreateJS)

|        |        |
|:-----------------|------------------:|
| スター数             |             合計で17kくらい |
| 最終更新日             |             6日前 |
| jQuery依存             |             なし |
| canvas             |             使用 |

4つの大きなライブラリからなり、canvas描画を中心とした処理をサポートする。
かなりしっかりとしたライブラリで、canvasで何かしら凝ったことをやりたいのであれば必見。
日本語の情報がかなり多い。

#### Tween.js

[tweenjs/tween\.js: Javascript tweening engine](https://github.com/tweenjs/tween.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |            7.5k  |
| 最終更新日             |         2ヶ月前    |
| jQuery依存             |             なし |
| canvas             |             非使用 |

簡単なアニメーション用の軽量なライブラリ。
[Understanding Tween\.js \- Michael Casebolt](https://mikebolt.me/article/understanding-tweenjs.html)
基本的にやっていることはタイミングファンクション（easingとか）に沿ってjsのオブジェクトの値を変化させること。
直接アニメーションに使わなくても、ゲームの時間に伴う値調節とかに使えたりするんかなー

#### Animate Plus

[bendc/animateplus: A\+ animation module for the modern web](https://github.com/bendc/animateplus)

|        |        |
|:-----------------|------------------:|
| スター数             |             5.5k |
| 最終更新日             |              2年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

> 安定した60 FPSを実現し、重量が3 KB（縮小および圧縮）未満であることを目的としているため、特にモバイルに適しています。
DOMアニメーションに加えてSVGもいけるようだ。

### アニメーションの型が決まっている系

#### Bounce.js

[Bounce\.js](http://bouncejs.com/)
[tictail / bounce\.js：CSS3を使った美しいアニメーションをすぐに作成できます。](https://github.com/tictail/bounce.js)

|        |        |
|:-----------------|------------------:|
| スター数             |             6.1k |
| 最終更新日             |             6年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

バウンドするようなアニメーションを簡単に作成できるツール、及びライブラリ。
公式サイトではGUIで任意のアニメーションを作成し、Export CSSをクリックすることでそのアニメーションの単体のCSSコードが生成できる。

#### AniJS

[AniJS, A Library to Raise your Web Design without Coding](https://anijs.github.io/)
[anijs/anijs: A Library to Raise your Web Design without Coding\.](https://github.com/anijs/anijs)

|        |        |
|:-----------------|------------------:|
| スター数             |             3.6k |
| 最終更新日             |             5年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

要素の`data-anijs`属性で以下のような指定をすることでjsのコードなしである程度の動的なアニメーション制御ができる。

```html
<div data-anijs="if: click, do: flipInY animated, to: .container-box></div>
```

扱えるアニメーションはAnimate.cssと同じもの。
Animate.cssをサクッと動的に制御したい場合は使うと良いかも。

#### Swiper

[Swiper \- The Most Modern Mobile Touch Slider](https://swiperjs.com/)
[nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions](https://github.com/nolimits4web/swiper)

|        |        |
|:-----------------|------------------:|
| スター数             |            24.3k  |
| 最終更新日             |         6日前    |
| jQuery依存             |             なし |
| canvas             |             非使用 |

スワイプ動作（PCの場合はドラッグ）におけるカルーセルの切り替わりアニメーションを実装できる。
実際にスマホで公式サイトを見てみると、スワイプに対してネイティブばりのヌルヌル感でアニメーションする様が体験できる。

#### wagerfield/parallax.js

http://matthew.wagerfield.com/parallax/
[wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device](https://github.com/wagerfield/parallax)

|        |        |
|:-----------------|------------------:|
| スター数             |            14.8k  |
| 最終更新日             |         13ヶ月前    |
| jQuery依存             |             なし |
| canvas             |             非使用 |

端末のジャイロの値に合わせて動くアニメーションを実装できる。
っぽいのだが、自分のiPhoneXでは動かなかった...
更新が数年前に止まっているので、最新のデバイスで動くかどうかは要注意。

#### pixelcog/parallax.js

[Parallax\.js \| Simple Parallax Scrolling Effect with jQuery](http://pixelcog.github.io/parallax.js/)
[pixelcog/parallax\.js: Simple parallax scrolling effect inspired by Spotify\.com implemented as a jQuery plugin](https://github.com/pixelcog/parallax.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |            3.3k  |
| 最終更新日             |         2年前    |
| jQuery依存             |             あり |
| canvas             |             非使用 |

非常にわかりにくいんですがparallax.jsという名前のライブラリ2つ目。
どちらかというと日本語で言うパララックスに近いのはこっちだと思う。
スクロールしたときにスクロールの速度とは別の速度で動く要素があるタイプのデザインを実装できる。


#### Slick

[slick \- the last carousel you'll ever need](https://kenwheeler.github.io/slick/)
[kenwheeler/slick: the last carousel you'll ever need](https://github.com/kenwheeler/slick/)

|        |        |
|:-----------------|------------------:|
| スター数             |            25.8k  |
| 最終更新日             |         8ヶ月前   |
| jQuery依存             |             あり |
| canvas             |             非使用 |

カルーセルをいい感じに実装できるライブラリ。
公式サイトの例はいい感じ。jQuery...

#### Popmotion

[Popmotion \| JavaScript animation libraries for delightful interfaces](https://popmotion.io/)
[Popmotion/popmotion: Simple animation libraries for delightful user interfaces](https://github.com/Popmotion/popmotion)

|        |        |
|:-----------------|------------------:|
| スター数             |            17.7k  |
| 最終更新日             |         3ヶ月前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

いくつかのライブラリの総称でもあるし、その中に単体のPopmotionというライブラリも含まれている。

##### Popmotion Pure
[popmotion/packages/popmotion at master · Popmotion/popmotion](https://github.com/Popmotion/popmotion/tree/master/packages/popmotion)
[Popmotion Pure \| A functional, flexible JavaScript animation library](https://popmotion.io/pure/)

ここに列挙されているようなアニメーションは自分で作ろうとすると超ツラいと思う。
慣性っぽい動きを実装したい場合は覗くと良さそう。

他にもあるけど、総じて記述が少ないw

#### Typed.js

[JavaScript Animated Typing with Typed\.js \| by Matt Boldt](https://mattboldt.com/demos/typed-js/)
[mattboldt/typed\.js: A JavaScript Typing Animation Library](https://github.com/mattboldt/typed.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |            9.8k  |
| 最終更新日             |         10ヶ月前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

タイピングしているようなアニメーションを実装できる。

#### Animsition

[Animsition](http://git.blivesta.com/animsition/)
[blivesta/animsition: A simple and easy jQuery plugin for CSS animated page transitions\.](https://github.com/blivesta/animsition)

|        |        |
|:-----------------|------------------:|
| スター数             |             3.8k |
| 最終更新日             |             3年前 |
| jQuery依存             |             あり |
| canvas             |             非使用 |

ページ遷移の前後にアニメーションを入れることができる。

#### turn.js

[Turn\.js: The page flip effect in HTML5](http://www.turnjs.com/)
[blasten/turn\.js: The page flip effect for HTML5](https://github.com/blasten/turn.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |             6.2k |
| 最終更新日             |             7年前 |
| jQuery依存             |             あり |
| canvas             |             非使用 |
| ライセンス             |          **not MIT** |

本のページをめくっているかのようなアニメーションを実装できる。
ライセンスがMITではないことに注意。商用利用は不可。
https://github.com/blasten/turn.js/blob/master/license.txt
v4は別のライセンスのようだが何になるのか見つけられなかった。

### スクロール系

#### AOS

[AOS \- Animate on scroll library](https://michalsnik.github.io/aos/)
[michalsnik/aos at v2](https://github.com/michalsnik/aos/tree/v2)

|        |        |
|:-----------------|------------------:|
| スター数             |             13.3k |
| 最終更新日             |             2年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

スクロールに応じて発火するアニメーションを簡単に実装できる。
公式サイトをスクロールするとすぐ分かる。
v1とv2で破壊的変更が入っているようなので注意。

#### wow.js

[wow\.js — Reveal Animations When Scrolling](https://wowjs.uk/)
[graingert/WOW: Reveal CSS animation as you scroll down a page](https://github.com/graingert/wow)

これもスクロール時に発火するアニメーションですが、GitHub上には「一時的な非推奨、AOSを推奨」と書かれている。
一時的な非推奨...
よく見るとこのレポジトリforkされたもので、元のレポジトリはwow.jsを有料ソフトウェアとして販売している。
どうも過去のQ&Aサイトとかの会話を見るに、MITライセンスだったレポジトリを途中で有償化したらしい。
それに反発した人がMITライセンスでforkして公開したという流れのようだ。
AOS推奨となっているし、現時点でこれを使う理由は無いだろう。

#### ScrollMagic

[ScrollMagic ♥ Demo](https://scrollmagic.io/)
[janpaepke/ScrollMagic: The javascript library for magical scroll interactions\.](https://github.com/janpaepke/ScrollMagic)

|        |        |
|:-----------------|------------------:|
| スター数             |            12.4k  |
| 最終更新日             |         8ヶ月前    |
| jQuery依存             |             なし |
| canvas             |             非使用 |
| ライセンス             |             MIT or GPL |

スクロールに同期した任意のアニメーションを実装できる。
ライセンスはMIT or GPLでMITがあるので問題なし。

実際のアニメーションの実装にGSAPを推奨しているが、GSAPはライセンスがMITではないことに注意。
Velocity.jsにも対応している他、他ライブラリを使わない方法（jsによるクラスの付け替え）でもOK。

#### ScrollReveal

[ScrollReveal](https://scrollrevealjs.org/)
[jlmakes/scrollreveal: Animate elements as they scroll into view\.](https://github.com/jlmakes/scrollreveal)

|        |        |
|:-----------------|------------------:|
| スター数             |            18.9k  |
| 最終更新日             |         6日前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |
| ライセンス             |            not MIT |

viewportに入った/出た際のアニメーションを簡単に実装できる。
ただし、ライセンスがMITではないことに注意。
OSSプロジェクトではGPLライセンスだが、商用の場合はコマーシャルライセンスが必要。

#### ScrollTrigger

[ScrollTrigger \- Let your page react to scroll changes](https://terwanerik.github.io/ScrollTrigger/)
[terwanerik/ScrollTrigger: Let your page react to scroll changes\.](https://github.com/terwanerik/ScrollTrigger)

|        |        |
|:-----------------|------------------:|
| スター数             |             3.3k |
| 最終更新日             |             7ヶ月 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

スクロールに合わせて発火する処理を簡単に制御できる。
これ自体はアニメーションではないが、基本的にスクロールに合わせて発火する処理はアニメーションがほとんどだと思うので紹介。
これとその他のアニメーションライブラリを合わせると良さそう。

#### DynCSS

[DynCSS \- Simple dynamic CSS rules to give life to your sites\.](https://www.vittoriozaccaria.net/dyn-css/)
[vzaccaria/DynCSS: Dynamic CSS Rules](https://github.com/vzaccaria/DynCSS)

|        |        |
|:-----------------|------------------:|
| スター数             |             483 |
| 最終更新日             |             6年前 |
| jQuery依存             |             あり |
| canvas             |             非使用 |

スクロールやウィンドウのリサイズイベントに合わせたアニメーションを実装できる。
CSSに独自のプロパティを書くとjsがそれを解釈してなんやかやしてくれる、というなかなかにトリッキーな仕組みのよう。

### jQuery依存な汎用系

#### Velocity.js

[Velocity\.js](http://velocityjs.org/)
[julianshapiro/velocity: Accelerated JavaScript animation\.](https://github.com/julianshapiro/velocity)

|        |        |
|:-----------------|------------------:|
| スター数             |             16.7k |
| 最終更新日             |             3ヶ月前 |
| jQuery依存             |             あり |
| canvas             |             非使用 |

jQuery依存のアニメーションライブラリとして優秀な様子。
https://qiita.com/kyota/items/754e0e6cb7a144eda850


#### Transit.js

[Transit \- CSS transitions and transformations for jQuery](http://ricostacruz.com/jquery.transit/)
[rstacruz/jquery\.transit: Super\-smooth CSS3 transformations and transitions for jQuery](https://github.com/rstacruz/jquery.transit)

|        |        |
|:-----------------|------------------:|
| スター数             |             7.4k |
| 最終更新日             |             5年前 |
| jQuery依存             |             あり |
| canvas             |             非使用 |

jQuery依存のアニメーションライブラリだが、Velocity.jsの方が軽快に動くという評判が多い。

### SVG系

#### Snap.svg

[Snap\.svg \- Home](http://snapsvg.io/)
[adobe\-webplatform/Snap\.svg: The JavaScript library for modern SVG graphics\.](https://github.com/adobe-webplatform/Snap.svg/)

|        |        |
|:-----------------|------------------:|
| スター数             |             12.8k |
| 最終更新日             |             3年前 |
| jQuery依存             |             なし |
| canvas             |             非使用 |

Adobe製のSVGアニメーションライブラリ。
DOMのjQuery、SVGのSnap、的な立ち位置を目指していた様子。
SVGを細かく動かしたいなら使ってみると良さそう。

#### DrawSVG

[jQuery DrawSVG](http://leocs.me/jquery-drawsvg/)
[lcdsantos/jquery\-drawsvg: Lightweight, simple to use jQuery plugin to animate SVG paths](https://github.com/lcdsantos/jquery-drawsvg)

|        |        |
|:-----------------|------------------:|
| スター数             |            752  |
| 最終更新日             |         4年前    |
| jQuery依存             |             あり |
| canvas             |             非使用 |

jQueryプラグインとしてのSVGアニメーションの実装ライブラリ。

#### Vivus

[vivus\.js \- svg animation](http://maxwellito.github.io/vivus/)
[maxwellito/vivus: JavaScript library to make drawing animation on SVG](https://github.com/maxwellito/vivus)

|        |        |
|:-----------------|------------------:|
| スター数             |            13.1k  |
| 最終更新日             |         11ヶ月前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGをアニメーションさせるライブラリ。
jQueryじゃないし比較的最近更新されてるしスター数もそれなりに多い。
SVG動かしたかったらmo.jsかこれかなあ。

#### Mo.js

[mo\.js](https://mojs.github.io/)
[mojs/mojs: The motion graphics toolbelt for the web](https://github.com/mojs/mojs)

|        |        |
|:-----------------|------------------:|
| スター数             |            15.9k  |
| 最終更新日             |         3ヶ月前    |
| jQuery依存             |             なし |
| canvas             |             非使用 |

非常に滑らかなアニメーションをSVGで実現する。
[Animocons: Animated Icons with mo\.js \| Codrops](https://tympanus.net/Development/Animocons/)
リンク切れ起こしてる部分もあるので古いですが、このmo.jsを使用したサンプルはめっちゃ気持ち良いです。
日本語の情報も多そう。

#### Two.js

[Two\.js](https://two.js.org/)
[jonobr1/two\.js: A renderer agnostic two\-dimensional drawing api for the web\.](https://github.com/jonobr1/two.js)

|        |        |
|:-----------------|------------------:|
| スター数             |            6.7k  |
| 最終更新日             |         1日前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

フラットモーショングラフィックスの作成を想定したライブラリ。
SVGもcanvasもWebGLも同じAPI描画できるようだ。
どうやらAppleがApple Watchのページで使っていたらしい。

#### bonsai.js

[BonsaiJS \- A Graphics Library](https://bonsaijs.org/)
[uxebu/bonsai: BonsaiJS is a graphics library and renderer](https://github.com/uxebu/bonsai)

|        |        |
|:-----------------|------------------:|
| スター数             |            2k  |
| 最終更新日             |         6年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGの他、音声やフォントなども使えるよう。
公式サイトのサンプルが動いてないのは気になる。
古めなので動作するかどうかは要確認。

#### Raphaël.js

[Raphaël—JavaScript Library](https://dmitrybaranovskiy.github.io/raphael/)
[DmitryBaranovskiy/raphael: JavaScript Vector Library](https://github.com/DmitryBaranovskiy/raphael)

|        |        |
|:-----------------|------------------:|
| スター数             |            10.7k  |
| 最終更新日             |         1ヶ月前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGと、VMLに対応したライブラリ。
クロスブラウザを意識していて、IEでも動くようだ。
VMLはSVGの前身。
[Vector Markup Language \- Wikipedia](https://ja.wikipedia.org/wiki/Vector_Markup_Language)

#### flubber

[veltman/flubber: Tools for smoother shape animations\.](https://github.com/veltman/flubber)

|        |        |
|:-----------------|------------------:|
| スター数             |            5.3k  |
| 最終更新日             |         9ヶ月前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGで特定の形から特定の形へとスムーズに変化させるアニメーションを実装できる。

#### SVG Morpheus

[SVG Morpheus \- Morph SVG icons](http://alexk111.github.io/SVG-Morpheus/)
[alexk111/SVG\-Morpheus: JavaScript library enabling SVG icons to morph from one to the other\. It implements Material Design's Delightful Details transitions\. \(THIS PROJECT IS NOT MAINTAINED ANYMORE\)](https://github.com/alexk111/SVG-Morpheus)

|        |        |
|:-----------------|------------------:|
| スター数             |            2.6k  |
| 最終更新日             |         3年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGの二つのアイコンをにゅっとしたアニメーションで変更するアニメーションを実装できる。
> THIS PROJECT IS NOT MAINTAINED ANYMORE
とのこと。

#### Walkway

[Connor Atherton \| Full stack developer](https://connoratherton.com/walkway)
[ConnorAtherton/walkway: An easy way to animate SVG elements\.](https://github.com/ConnorAtherton/walkway)

|        |        |
|:-----------------|------------------:|
| スター数             |            4.3k  |
| 最終更新日             |         2年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

https://www.polygon.com/a/ps4-review/
このサイトのアニメーションを再現するために作られた。
SVG画像をアニメーションさせる。
公式サイトにはGUIツールも存在。

#### Lazy Line Painter

[Lazy Line Painter](http://lazylinepainter.info/)
[camoconnell/lazy\-line\-painter: Lazy Line Painter \- A Modern JS library for SVG path animation](https://github.com/camoconnell/lazy-line-painter)

|        |        |
|:-----------------|------------------:|
| スター数             |            1.8k  |
| 最終更新日             |         2年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

SVGのパスアニメーションを実装できる。

#### letterbolt

[buseca\.github\.io/letterbolt/](http://buseca.github.io/letterbolt/)
[buseca/letterbolt](https://github.com/buseca/letterbolt/)

|        |        |
|:-----------------|------------------:|
| スター数             |            29  |
| 最終更新日             |         6年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

アニメーションするフォントをSVGで描画できる。

#### zPath.js

[ZetCoby/zPath\.js: A jquery plugin that will animate/draw SVG](https://github.com/ZetCoby/zPath.js)

|        |        |
|:-----------------|------------------:|
| スター数             |            29  |
| 最終更新日             |         5年前   |
| jQuery依存             |             あり |
| canvas             |             非使用 |

#### Yallow

[Yarrow — svg animated arrow pointer and tooltip](http://krispo.github.io/yarrow/)
[krispo/yarrow: svg animated arrow pointer and tooltip](https://github.com/krispo/yarrow)

|        |        |
|:-----------------|------------------:|
| スター数             |            35  |
| 最終更新日             |         4年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

矢印のアニメーションをSVGで実装できる。
公式サイトのサンプルが動いていないので動作は要確認。

#### loading...

[Loading\.\.\.](http://jxnblk.com/loading)
[jxnblk/loading: This could take a while](https://github.com/jxnblk/loading)

|        |        |
|:-----------------|------------------:|
| スター数             |            3.6k  |
| 最終更新日             |         5年前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

ネタレポジトリのようだけど、スター数が多い。
公式サイトが動いていなくて残念...見てみたかった。

### WebGL

#### WebGL API直接

[WebGL: Web の 2D および 3D グラフィックス \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API)
[WebGL チュートリアル \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial)

ライブラリを使わずにそのまま書く。
時間が無限にあったら書きたい。

#### Three.js

[three\.js – JavaScript 3D library](https://threejs.org/)
[mrdoob/three\.js: JavaScript 3D library\.](https://github.com/mrdoob/three.js/)

|        |        |
|:-----------------|------------------:|
| スター数             |            62.2k  |
| 最終更新日             |         5時間前    |
| jQuery依存             |             なし |
| canvas             |             使用 |

WebGLを使い、3Dを描画するためのライブラリ。
公式サイトの使用例だけで1日つぶせそう。

めちゃくちゃ個人的な話だが、アプリでめっちゃプレイしていたクロッシーロードが公式サイトの中の例に並んでいて、Webでクロッシーロードあったんか！という感動でこれを書きながら数分プレイしてしまった。
Three.jsありがとう。

Webで3Dをやろうと思ったらとりあえずこれを使えば良さそう。

#### GrimoireJS

[Grimoire\.js \- WebGL framework for Web development \-](http://grimoire.gl/)
[GrimoireGL/GrimoireJS: A WebGL framework for Web development\.](https://github.com/GrimoireGL/GrimoireJS)

|        |        |
|:-----------------|------------------:|
| スター数             |            333  |
| 最終更新日             |         3年前    |
| jQuery依存             |             なし |
| canvas             |             使用 |

DOMとDOM APIっぽい書き方（独自のタグでマークアップするなど）でWebGLを実装できる。
どうでもいいけど、アイコンがbrowserifyを思い出すよ。
公式のサンプルが動いてない:cry:

### React

#### React Transition Group

[React Transition Group](https://reactcommunity.org/react-transition-group/)
[reactjs/react\-transition\-group: An easy way to perform animations when a React component enters or leaves the DOM](https://github.com/reactjs/react-transition-group)

|        |        |
|:-----------------|------------------:|
| スター数             |            7.4k  |
| 最終更新日             |         6日前    |
| jQuery依存             |             なし |
| canvas             |             使用 |

React公式のアニメーションライブラリ。

#### react-motion

[chenglou/react\-motion: A spring that solves your animation problems\.](https://github.com/chenglou/react-motion)

|        |        |
|:-----------------|------------------:|
| スター数             |            18.6k  |
| 最終更新日             |            8ヶ月前 |
| jQuery依存             |             なし |
| canvas             |             使用 |

RenderPropsな書き方で、Reactコンポーネント内の値を変化させる。
イメージ的にはTween.jsのReact版という感じ。

#### react-spring

[react\-spring](https://www.react-spring.io/)
[react\-spring/react\-spring: ✌️ A spring physics based React animation library](https://github.com/react-spring/react-spring)

|        |        |
|:-----------------|------------------:|
| スター数             |            17.6k  |
| 最終更新日             |            3ヶ月前 |
| jQuery依存             |             なし |
| canvas             |             使用 |

> spring-physics based animation
を提供するReact用アニメーションライブラリ。
従来のタイミングファンクション系の動きとは考え方が違うらしい。
react-motionやanimatedの良いとこどりをしているそう。

#### Animated

[animatedjs/animated: Declarative Animations Library for React and React Native](https://github.com/animatedjs/animated)

|        |        |
|:-----------------|------------------:|
| スター数             |            1.7k  |
| 最終更新日             |            2年前 |
| jQuery依存             |             なし |
| canvas             |             使用 |

#### framer/motion

[Framer Motion](https://www.framer.com/motion/)
[framer/motion: Open source, production\-ready animation and gesture library for React](https://github.com/framer/motion)

|        |        |
|:-----------------|------------------:|
| スター数             |            6.1k  |
| 最終更新日             |         8時間前   |
| jQuery依存             |             なし |
| canvas             |             非使用 |

React環境下において、アニメーションを宣言的に実装できる。
Popmotion系列。
宣言的にアニメーションを定義できるので、例えばstateがtrueからfalseに変わったときに要素の位置が変わる、みたいなコンポーネントでこれを使うとReactと親和性高くアニメーションを実装できる。
これ個人的に、公式サイトのファーストビューの例のアニメーションが非常に秀逸だと思う、パッと見でそのstateの変更とアニメーションっていう繋がりがわかりやすい。
日本語の情報は少なそうだけど、Reactで書くときにアニメーション欲しくなったらまず使ってみたい。

#### Pose

[Pose \| A truly simple animation library for React, React Native, and Vue](https://popmotion.io/pose/)
[popmotion/packages/popmotion\-pose at master · Popmotion/popmotion](https://github.com/Popmotion/popmotion/tree/master/packages/popmotion-pose)

Popmotion系列のReact用アニメーションライブラリ。
実装のサンプルコードを見るとstyled-componentsっぽさを感じる。

#### velocity-react

[google\-fabric/velocity\-react: React components for Velocity\.js](https://github.com/google-fabric/velocity-react)

Fabric製のVelocity.jsをReactで使うためのライブラリ。

# その他ツール

## アニメーションジェネレータ

- [CSS3 Keyframes Animation Generator](http://cssanimate.com/)
- [Animista](https://animista.net/)
- [WAIT\! Animate](https://waitanimate.wstone.io/)
- [Shape Shifter](https://shapeshifter.design/)
    - アイコンアニメーションの作成
    - [アイコンアニメーションテクニックの概要\| Androidデザインパターン](https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html)

## その他

- [Ceaser \- CSS Easing Animation Tool \- Matthew Lein](https://matthewlein.com/tools/ceaser)
    - タイミングファンクションのベジェ曲線をGUIで作成できる。
- [cubic\-bezier\(\.26,\.5,\.75,\.28\) ✿ cubic\-bezier\.com](https://cubic-bezier.com/#.26,.5,.75,.28)
    - 上に同じ。
- [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/)
    - CSSによる三角形を簡単に作れる。
- [Primitive for macOS](https://primitive.lol/)
    - 既存の画像をプリミティブな図形の集合に変換する。
- [Lazy Line Composer](http://lazylinepainter.info/#composer)

# コピペで出来る系

- [コピペで使うマウスオーバー時のhover cssエフェクト28選 \| SONICMOOV LAB](https://lab.sonicmoov.com/markup/css/hover-css/)
- [Web最新テクニックはこれ！コピペで実装できるすごいHTML/CSSスニペット68個まとめ \- PhotoshopVIP](http://photoshopvip.net/115612)
- [コピペで実装できる！最新WebテクHTML/CSSコードスニペット66個まとめ \- PhotoshopVIP](http://photoshopvip.net/114044)
- [アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ \- PhotoshopVIP](http://photoshopvip.net/90427)
- [すごすぎるポートフォリオ\.\.\.コピペで実装できるCSSデザイン！ 【 アニメーション 】 \- デシノン](https://deshinon.com/2019/03/03/portfolio-css-animation/)
- [CSSアニメーションで実現！ コピペで使えるマイクロインタラクション \- ICS MEDIA](https://ics.media/entry/15130/)

# その他の参考

ありがとうございます🙌

- [Webサイトにおけるアニメーション実装へのアプローチ 〜未だ見果てぬ夢〜 \- Qiita](https://qiita.com/syuji-higa/items/b30b12b8c4f95ce80baf)