CSSアニメーションジェネレーターとは？ホバー・登場・文字の動きを作る
CSS だけで、ボタンやテキストに動きをつけるコードを作るツールです。登場やくり返しの動きは @keyframes と animation で、マウスを乗せたときの変化は :hover と transition で出力します。
プリセットは、コーポレートサイト向けの落ち着いた動き、EC やイベント向けのにぎやかな動き、ホバー、1文字ずつのテキスト演出など127種類あります。適用対象（ボタン・テキスト・1文字ずつ）、再生モード（ずっとループ・1回のみ）、イージング、速度、遅延、移動・拡大・角度・透明度を変えながら、その場でプレビューできます。
できたコードは HTML と CSS に分けてコピーでき、2つをまとめた ZIP としてダウンロードすることもできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 動きを選ぶ。プリセットから近いものを選び、速度・遅延・イージングなどを調整します。「1回再生」でもう一度動きを確認できます。
- HTML と CSS をコピーする。「HTML Code」と「CSS Code」の Copy ボタンを押し、HTML は動かしたい場所に、CSS はスタイルシートに貼り付けます。まとめて持ち出すなら「HTML+CSSをセットでZIPダウンロード」を使います。
- 自分の要素に合わせる。既存の見出しやボタンを動かすときは、CSS のクラス名をその要素に付けるか、
animationの行と@keyframesをその要素のクラスに書き写します。@keyframesの名前は、他の動きと重ならないようにしてください。
ブラウザ対応
| ブラウザ | @keyframes・animation |
CSS変数（1文字ずつの遅延） |
|---|---|---|
| Chrome・Edge | Chrome 43 以降・Edge 12 以降 | Chrome 49 以降・Edge 15 以降 |
| Safari（Mac・iPhone） | 9 以降 | Mac 9.1 以降・iPhone 9.3 以降 |
| Firefox | 16 以降 | 31 以降 |
出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。表のバージョンはいずれも接頭辞なしで動くバージョンです。いま使われている主なブラウザはすべて対応しているので、-webkit- 付きの指定を書き足す必要はありません。
よくある質問 (FAQ)
ホバーは「マウスを乗せたときの変化」、登場・ループは「決まった動きの再生」です。ホバーは
:hover で変化後の見た目を書き、transition でその間をなめらかにつなぎます。
登場・ループは @keyframes で途中の姿を決め、animation で再生します。「1回のみ」はページを開いたときに1回だけ、「ずっとループ」はくり返し再生されます。
文字を1つずつ
<span> で囲み、順番に少しずつ遅らせて再生しています。各文字に --char-index という番号を持たせ、CSS の animation-delay でその番号に応じた遅れをつけます。
読み上げソフトが1文字ずつ区切って読まないよう、外側の要素に元の文章を aria-label として付けています。
このツールが出力するのは、ページを開いたときに再生される CSS です。画面に入ったときに動かしたい場合は、JavaScript の
IntersectionObserver などで要素が見えたことを検知してから、アニメーションのクラスを付ける方法がよく使われます。
OS の「視差効果を減らす」などの設定をしている人には、動きを止めるのが親切です。CSS の
@media (prefers-reduced-motion: reduce) の中で、そのクラスの animation と transition を none にすると、設定している人にだけ動きを止められます。
このツールの出力には含まれていないので、必要に応じて書き足してください。