CSSアニメーション生成CSS Animation Generator
定番のCSSアニメーションを選び、色・フォント・速度を調整してからコピー。Pick a classic CSS animation, tune colors, font, and speed, then copy clean CSS.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
ホバー系はプレビュー上でマウスを乗せて確認できます Hover presets — move the pointer over the preview
実装例（HTML + CSS） Implementation example (HTML + CSS)
そのまま .html として保存して開けます。注目・出現（スクロール1回）は Intersection Observer の script も含みます。 Save as .html and open in a browser. Scroll-once attention/entrance presets include the Intersection Observer script.
CSS のみ CSS only
使い方・ユースケース How to Use & Use Cases
カテゴリ（ホバー・ローディング・注目・出現・リンク）からプリセットを選び、プレビューで動きを確認します。文字色・背景色・アクセント色・フォント・速度を変えると、それに合わせたCSSが生成されます。 Pick a preset by category (hover, loading, attention, entrance, links) and preview the motion. Change text, background, accent colors, font, and duration to regenerate matching CSS.
注目・出現系は「スクロールで表示時に1回」が初期値です。要素が画面に入ったときに Intersection Observer で is-inview クラスを付け、アニメーションが1回だけ再生されます。プレビューはその場で1回再生して動きを確認できます。 Attention and entrance presets default to play once on scroll. Use Intersection Observer to add the is-inview class when the element enters the viewport. The preview plays once in place so you can see the motion.
ツール下部の「実装例（HTML + CSS）」には、生成した CSS を style タグに埋め込んだ最小の HTML ファイル例が表示されます。注目・出現でスクロール1回の場合は Intersection Observer の script も含まれます。そのまま .html として保存して動作確認できます。 The “Implementation example (HTML + CSS)” block shows a minimal HTML file with the generated CSS in a style tag. Scroll-once attention/entrance presets also include the Intersection Observer script. Save it as .html to try it locally.
ホバー系はプレビュー上にマウスを乗せて確認します。生成CSSには必要に応じて prefers-reduced-motion 対応も含められます。 Hover presets play on pointer over the preview. Output can include prefers-reduced-motion rules.
よくある質問FAQ
このツールの特徴は？What does this tool offer?
ホバー・ローディング・注目・出現・リンクの定番アニメーションを50種以上から選び、文字色・背景色・フォント・速度を調整してからコピーできます。注目・出現はスクロール表示向けの1回再生が初期値で、HTML＋CSS（必要なら JS）の実装例も表示されます。サイトに貼り付けやすいよう、余計なリセット宣言を含まない出力を目指しています。Choose from 50+ classic animations across hover, loading, attention, entrance, and links—then tune colors, font, and speed before copying. Attention/entrance default to scroll-once playback, with HTML + CSS (and JS when needed) examples. Output aims to stay lean without extra reset rules.
何種類のプリセットがありますか？How many presets are included?
ホバー・ローディング・注目・出現・リンクの5カテゴリで50種類以上です。検索ボックスで名前から絞り込めます。More than 50 across five categories—hover, loading, attention, entrance, and links—with name search.
ホバーアニメーションはどう使いますか？How do I use hover animations?
生成されたクラス名をボタンやリンクのHTMLに付け、CSSをスタイルシートに貼り付けてください。マウスを乗せたときだけアニメーションします。Add the generated class to your button or link HTML and paste the CSS into your stylesheet. The animation runs on hover.
注目アニメーションはずっとループしますか？Do attention animations loop forever?
いいえ。注目・出現は初期設定が「スクロールで表示時に1回」です。生成CSSは通常 .クラス名 にアニメーションを付けず、.クラス名.is-inview のときだけ1回再生します。実装例に Intersection Observer の script も含まれます。ループにしたい場合は再生を「ループ」に変更してください。No. Attention and entrance default to play once on scroll. The CSS animates .class.is-inview only (one iteration), not the base class. The implementation example includes Intersection Observer script. Switch playback to Loop if you want it to repeat.
ローディングのドットやバーは単体で動きますか？Do dot/bar loaders work with one element?
子要素の span が必要です。実装例の HTML に親要素と子 span の構造が含まれます。CSSには双方のスタイルが含まれます。They need child span elements. The implementation example HTML includes the parent and span structure; the copied CSS styles both.
animate.css や Tailwind CSS など、CSSライブラリと併用できますか？Can I use this with CSS libraries like animate.css or Tailwind?
併用はできますが、ライブラリ側の animation・transform・transition などが優先され、意図どおり動かないことがあります。特に Tailwind の animate-* ユーティリティ、Bootstrap のユーティリティ、animate.css の同名クラスは競合しやすいです。生成 CSS をライブラリより後に読み込む、セレクタの詳細度を上げる、ライブラリのアニメーション用クラスを外すなどで調整してください。ホバー系はフレームワークのボタンスタイルが transform を上書きする場合もあります。Yes, but library rules for animation, transform, or transition may win and block the effect—especially Tailwind animate-* utilities, Bootstrap helpers, or animate.css class names. Load the generated CSS after the framework, raise selector specificity, or remove conflicting animation classes. Hover presets can also fail if framework button styles override transform.
スクロール表示（is-inview）が動きませんScroll-into-view (is-inview) does not play
生成 CSS だけでは再生されません。is-inview クラスを付ける JavaScript（実装例に含まれる Intersection Observer）が必要です。また、ライブラリの opacity: 0 や visibility: hidden、overflow: hidden の親要素があると表示や検知に影響することがあります。CSS alone is not enough—you need JavaScript to add is-inview (the implementation example includes Intersection Observer). Parent elements with opacity: 0, visibility: hidden, or overflow: hidden from a framework can also block visibility or detection.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
