Webサイトの「動き」を、プレビューを見ながら選んで、コピペで使えるCSSのコードにできるツールです。登場・退場・ループ・ホバー・テキスト・ローディングの6つの種類に、合わせて100種類の動きを用意しました。
使い方は3つの手順です。種類とプリセットを選び、時間・強さ・イージングを調整して、出てきたコードをコピーします。 CSSのほかに、GSAPのコードや、スクロールして画面に入ったときに再生するコードも出せます。登録は不要で、処理はすべてブラウザの中で行います。
CSSアニメーション ジェネレーターを読み込んでいます。表示されないときは、JavaScript を有効にしてページを再読み込みしてください。
使い方
- 上のボタンで種類（登場／退場／ループ／ホバー／テキスト／ローディング）を選び、プリセットを押します。プレビューがその場で動きます。
- 「時間」「遅れ」「強さ」と「イージング」を調整します。イージングは一覧から選ぶほか、グラフの黄色い点をドラッグして自分で作れます。「スロー（4倍）」にすると、動きの細かいところまで確認できます。
- 下の「CSS」「HTML」などのタブを切り替えて、「コードをコピー」を押します。クラス名は、自分のサイトに合わせて変えられます。「HTMLファイルで保存」を押すと、CSS・HTML・JavaScriptをまとめた1枚のファイルになり、そのままブラウザで開いて試せます。
生成したコードは、商用のサイトを含めて自由に使ってかまいません。
6つの種類と、向いている場面
コードを使わなくても、どんな動きがあるかのサンプルとして眺めるだけでも使えます。
| 種類 | 数 | どんな動きか | 向いている場面 |
|---|---|---|---|
| 登場 | 23 | フェード、スライド、ズーム、マスクで現れる など | セクションの見出しや画像が、スクロールで出てくるとき |
| 退場 | 12 | フェードアウト、小さくなって消える、マスクで消える など | モーダルやお知らせを閉じるとき、スライドを切り替えるとき |
| ループ | 22 | パルス、ふわふわ浮く、揺れる、回転 など | 「お問い合わせ」ボタンなど、気づいてほしい要素 |
| ホバー | 17 | 浮き上がる、左から塗る、下線が伸びる など | ボタンやリンクに、押せることを伝えるとき |
| テキスト | 15 | 1文字ずつ出る、タイプライター、マーカー など | トップページのキャッチコピーや見出し |
| ローディング | 11 | リング、3つの点、スケルトン など | 読み込みや送信を待ってもらうとき |
出力できるコードの違い
CSS（いちばん手軽）
CSSだけで動くので、JavaScriptやライブラリを読み込む必要がありません。ページを開いたときに1回だけ動かす、ずっとくり返す、マウスを乗せたときに変える、といった動きはCSSで足ります。
スクロールで再生（CSS＋JS）
登場の動きは、ページを開いた瞬間に再生されると、画面の外にある要素は見る前に終わってしまいます。「スクロールで再生」のタブでは、要素が画面に入ったときにクラスを付けて再生する、短いJavaScript（Intersection Observer）も一緒に出します。JavaScriptが動かない環境では、最初から表示されたままになるようにしてあります。
GSAP・GSAP ScrollTrigger
GSAPは、Webのアニメーションを作るためのJavaScriptのライブラリです。いくつもの動きを順番につなげたり、スクロールの位置に合わせて細かく動かしたりするなら、CSSよりGSAPのほうが書きやすくなります。
2026年10月時点では、GSAPはScrollTriggerなどのプラグインも含めて、商用のプロジェクトでも無料で使えます（GSAPのライセンス、2025年4月30日発効）。出力するコードは、GSAPを読み込んだあとに実行してください。
なお、このツールのプレビューはCSSだけで動かしていて、GSAPは使っていません。GSAPのライセンスは、Webflow（GSAPの提供元）の機能と競合するような「コードを書かずにアニメーションを作れるツール」でGSAPを使うことを禁止しています。このツールがそれに当たるかどうかに関係なく使えるよう、ツールが出すのはGSAPを使うコードの文字だけにしました。
このサイトでGSAPを使ってみて
このサイトのトップページの動きは、GSAPとScrollTriggerで作っています。スクロールした量に合わせて要素を動かしたり、いくつもの要素を少しずつずらして順番に出したりしています。こうした演出はCSSだけだと書くのが大変ですが、GSAPなら短いコードで書けます。
一方で、ファイルの大きさはかかります。このサイトで読み込んでいるGSAP本体とScrollTriggerは、合わせて約116KB（gzipで圧縮すると約46KB）です。CSSだけで書けば、このファイルはまるごと要りません。
GSAPの良さは、軽さよりも、いくつもの動きをつなげたり、スクロールの位置に合わせて細かく動かしたりしやすいところです。1つの要素がふわっと出てくるくらいならCSSで、ページ全体の演出を組み立てるならGSAPで、と使い分けるのがおすすめです。
動きをつけるときに気をつけていること
動かすのは transform と opacity を中心に
このツールの100種類のうち79種類は、位置・大きさ・回転（transform）と透明度（opacity）だけを変えています。残りは、ぼかし（filter）やマスク（clip-path）、影や色など、見た目に必要なほかの値も使っています。Googleの開発者向けの解説でも、アニメーションはできるだけこの2つに限ると、なめらかに動きやすいとされています（web.dev「高性能な CSS アニメーションを作成する方法」）。top や width を動かすと、ページの配置の計算がやり直しになり、カクつきの原因になります。
「動きを減らす」設定の人には止める
OSには、画面の動きを減らす設定があります（Macの「アクセシビリティ」にある「動きの抑制」など。iPhone・Windows・Androidにも同じような設定があります）。動きで気分が悪くなる人もいるため、CSSの prefers-reduced-motion を使えば、その設定をしている人にはアニメーションを止められます（MDN「prefers-reduced-motion」）。
このツールでは「『動きを減らす』設定の人には止める」にチェックを入れておくと、そのためのCSSも一緒に出力します（初期設定でオンです）。ローディングは、動いていること自体が「待っている」ことを伝えるので、対象から外しています。
動きは「ここを見てほしい」場所に絞る
1つの画面で動くものが多いと、どこを見ればいいか分からなくなります。私は、見出しやボタンなど、見てほしい場所だけに動きをつけるようにしています。
よくある質問
スクロールして画面に入ったときに動かせますか？
できます。「登場」の動きを選んで、「スクロールで再生（CSS＋JS）」か「GSAP ScrollTrigger」のタブのコードを使ってください。
生成したコードは商用のサイトで使えますか？
使えます。コードは自由に使ってかまいません。GSAPのコードを使う場合は、GSAP本体のライセンスにも従ってください（上の「GSAP・GSAP ScrollTrigger」を参照）。
WordPressで使うには？
CSSは、テーマの「追加CSS」か子テーマのスタイルシートに貼り付けます。HTMLは、ブロックエディタの「カスタムHTML」ブロックに入れるか、動かしたい要素のクラスにツールで付けたクラス名を追加します。JavaScriptが必要なもの（スクロールで再生、1文字ずつのテキスト、GSAP）は、テーマのファイルで読み込みます。
1文字ずつ動かすテキストは、読み上げソフトでどう読まれますか？
文字を1つずつ別の要素に分けるので、そのままだと読み上げソフトが1文字ずつ区切って読むおそれがあります。出力する「文字を分けるJS」では、分ける前の文を画面に出さない形で1つ残して読み上げソフトにはそれを読ませ、分けた文字は aria-hidden で読み上げの対象から外しています。
まとめ
動きを1つ決めるときは、プリセットを選んで「スロー」で確かめ、時間とイージングを少しずつ変えてみるのが早道です。CSSで足りるものはCSSで、スクロールに合わせた複雑な動きはGSAPで、と使い分けてください。
これまでに作ったサイトは制作実績で見られます。Webサイトの制作や、動きのあるページのご相談は、お問い合わせからどうぞ。
