CSSアニメーションとtransitionの違いは？

transitionは状態変化をトリガーに2つの状態間を補間します。animationはトリガーなしで自動再生でき、@keyframesで複数の中間状態を定義できます。

アニメーションはパフォーマンスに影響しますか？

transformとopacityのアニメーションはGPUアクセラレーションが有効で高速です。width、height、marginのアニメーションはリフローを発生させるため避けるべきです。

prefers-reduced-motionとは？

アニメーションに敏感なユーザーのためのメディアクエリです。@media (prefers-reduced-motion: reduce) でアニメーションを無効化するフォールバックを用意することが推奨されます。

データはサーバーに送信されますか？

いいえ。すべての処理はブラウザ内で完結しています。外部へのデータ送信は一切ありません。

CSSアニメーションジェネレーター｜@keyframes コード出力

⚠️ 本ツールの動作にはJavaScriptを有効にする必要があります。

📖 概要 🔰 使い方 📚 プロパティ解説 ❓ FAQ 💡 活用シーン

🔒

ブラウザ内処理

データはサーバーに一切送信されません

📝

登録不要

アカウント不要で即座に利用可能

⚡

即時プレビュー

すべての変更がリアルタイム反映

animation アニメーション設定

Duration（速さ） 0.6s

Delay（遅延） 0s

Easing（緩急）

繰り返し 1

infinite（無限ループ）

Direction（方向）

Fill Mode

CSS CODE

/* Select a preset to generate CSS */

CSSアニメーションジェネレーターは、@keyframes を使ったCSSアニメーションをプリセットから選び、パラメータを調整して生成できる無料オンラインツールです。フェードイン、スライド、ズーム、バウンスなど12種類のプリセットを用意しています。

Duration（速さ）、Delay（遅延）、Easing（緩急）、繰り返し回数、方向、Fill Modeなどのパラメータをスライダーで直感的に調整でき、プレビューでリアルタイム確認が可能です。生成されたCSSコードはワンクリックでコピーできます。

すべての処理はブラウザ内で完結し、データがサーバーに送信されることはありません。登録不要でご利用いただけます。

プリセットを選ぶ

フェード・スライド・スケール・回転の4カテゴリから好みのアニメーションプリセットをクリック。プレビューエリアで即座に動作確認できます。

パラメータを調整

Duration、Delay、Easing、繰り返し回数、方向、Fill Modeをスライダーやセレクトボックスで微調整。変更はリアルタイムでプレビューに反映されます。

コードをコピー

生成された @keyframes + animation ショートハンドのCSSコードを📋ボタンでコピー。そのままプロジェクトに貼り付けてご利用ください。

animation プロパティは、アニメーション名・再生時間・イージング・遅延・繰り返し回数・方向・填充モードをまとめて指定できるショートハンド記法です。

プロパティ	説明	デフォルト
`animation-name`	@keyframesで定義したアニメーション名	none
`animation-duration`	1回の再生にかかる時間	0s
`animation-timing-function`	加減速カーブ（ease, linear等）	ease
`animation-delay`	開始までの遅延	0s
`animation-iteration-count`	繰り返し回数（infiniteで無限）	1
`animation-direction`	再生方向（normal, reverse, alternate）	normal
`animation-fill-mode`	アニメーション前後のスタイル維持	none

@keyframes ルールの書き方

@keyframes ルールでは、開始状態（from / 0%）と終了状態（to / 100%）を定義します。中間キーフレーム（50% など）を追加することで、バウンスやパルスのような複雑な動きも表現できます。

ブラウザ対応状況

CSS Animationsはすべてのモダンブラウザでサポートされています（IE10以降）。ベンダープレフィックスは不要です。

Q. CSSアニメーションとtransitionの違いは？: A. transition は状態変化（hover等）をトリガーに2つの状態間を補間します。animation はトリガーなしで自動再生でき、@keyframesで複数の中間状態を定義できる点が大きな違いです。
Q. アニメーションはパフォーマンスに影響しますか？: A. transform（translate, scale, rotate）と opacity のアニメーションはGPUアクセラレーションが有効で高速です。width、height、margin のアニメーションはリフローを発生させるため避けるべきです。
Q. prefers-reduced-motionとは？: A. アニメーションに敏感なユーザーのためのメディアクエリです。@media (prefers-reduced-motion: reduce) でアニメーションを無効化するフォールバックを用意することが推奨されます。
Q. animation-fill-modeのforwardsは必要ですか？: A. フェードインなどの場合、forwards を指定しないとアニメーション終了後に初期状態に戻ってしまいます。最終フレームのスタイルを維持したい場合は必須です。
Q. データはサーバーに送信されますか？: A. いいえ。すべての処理はブラウザ内で完結しています。外部へのデータ送信は一切ありません。

📱

ページ読み込みアニメーション

ヒーローセクションやカードのフェードイン・スライドインで、ページのファーストビューを印象的に演出。

🔘

ボタン・CTAの注目効果

パルスやバウンスアニメーションでCTAボタンに視覚的な注目を集め、クリック率を向上。

📊

スクロールアニメーション

Intersection Observer APIと組み合わせ、スクロール位置に応じて要素をアニメーション表示。

🎯

ローディング・フィードバック

データ取得中のスピナーや、フォーム送信後の成功メッセージのアニメーション表示。

CSS