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

CSSキーフレームアニメーションをビジュアルに生成します。アニメーションタイプ、期間、イージング、反復回数を選択してコピー可能なCSSコードを取得できます。

Animation preset:

Duration (s)

Delay (s)

Easing

Iterations

Direction

Fill Mode

Preview

Generated CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated-element {
  animation: fadeIn 0.6s ease 0s 1 both;
}

CSSアニメーションジェネレーターの使い方

1アニメーションプリセット（フェード、スライド、バウンス、スピンなど）を選択します。
2期間、遅延、イージング、反復回数を調整します。
3ブラウザーでアニメーションをリアルタイムでプレビューします。
4生成されたCSSキーフレームとアニメーションプロパティをコピーします。

Zenovayアナリティクス

訪問者の本当の行動を知る。

リアルタイムの訪問者トラッキング
プライバシーファースト、クッキーバナーなし
2分でセットアップ

Zenovayを見る

よくある質問

CSSトランジションとアニメーションの違いは何ですか？▾

CSSトランジションはイベント（ホバー、フォーカス、クラス変更）によってトリガーされた2つの状態間のプロパティ変化をアニメーション化します：transition: opacity 0.3s ease。CSSアニメーションは@keyframesを使用して自動的に実行される多段階シーケンスを定義します：animation: fadeIn 1s ease forwards。トランジションはホバー効果に適し、アニメーションは継続的な効果（ローディングスピナー）、エントランス効果、またはユーザー操作なしで実行される多段階シーケンスに適しています。

イージング関数とは何ですか？▾

イージング関数はアニメーションが時間とともにどのように進行するかを制御します。Linear：全体を通じて一定速度。Ease：ゆっくり始まり、速くなり、ゆっくり終わる（デフォルト）。Ease-in：ゆっくり始まり、速く終わる。Ease-out：速く始まり、ゆっくり終わる（退場アニメーションに適切）。Ease-in-out：両端がゆっくり。cubic-bezier(x1, y1, x2, y2)：カスタムカーブ。steps(n)：跳ねるような離散的なステップ（スプライトアニメーションに適切）。

animation-fill-modeは何をしますか？▾

animation-fill-modeはアニメーションが再生されていないときにどのスタイルが適用されるかを制御します：none（デフォルト）— アニメーション前後にキーフレームのスタイルは適用されません。forwards — アニメーション終了後、最後のキーフレームスタイルが維持されます。backwards — 遅延期間中に最初のキーフレームスタイルが適用されます。both — forwardsとbackwardsを組み合わせます。エントランスアニメーション（fadeInなど）にはfill-mode: bothを使用して、アニメーション前の状態でフラッシュするのを防いでください。

スクロールでアニメーションをトリガーするにはどうすればよいですか？▾

CSSのみ：animation-play-stateプロパティを使用します。要素がIntersectionObserverを使用してビューにスクロールされたときに、JavaScriptでanimation-play-state: runningクラスを追加します。モダンCSS：@scroll-timelineとanimation-timeline: scroll() APIにより、Chrome 115+で純粋なCSSスクロール駆動アニメーションが可能です。シンプルなアプローチ：要素がビューポートに入ったときにJavaScriptで「animate」クラスを追加し、そのクラスにCSSアニメーションを定義します。

CSSアニメーションとJavaScriptアニメーションのどちらを使うべきですか？▾

CSSアニメーションはシンプルな離散的なアニメーションに適しています — コンポジタースレッドで実行され、可能な限りレイアウト/ペイントを避けます。JavaScript（Web Animations API、GSAP、Framer Motion）は複雑なシーケンシング、インタラクティブアニメーション、物理ベースのモーション、ランタイム値に依存するアニメーションに適しています。Web Animations APIはCSSアニメーションをJavaScriptで制御できます：element.animate([...keyframes], { duration: 300 })。GSAPは複雑なアニメーションのゴールドスタンダードです。

画像ツール