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

Q: 視差効果の軽減オプションは何を追加しますか。

OSで視差効果の軽減を有効にしているユーザー向けに、`animation: none` を設定する `@media (prefers-reduced-motion: reduce)` ブロックを追加します。

プリセットまたは独自のキーフレームからCSSの@keyframesアニメーションを作成します。再生時間、遅延、繰り返し、方向、フィルモード、cubic-bezier曲線を設定できます。

プリセット

キーフレーム

アニメーション名

キーフレーム（@keyframes { … } の中身）

1 行に 1 ルール。例：50% { transform: scale(1.2); }。自由に編集でき、プレビューはすぐに更新されます。

タイミング

再生時間s

遅延s

方向

フィルモード

無限に繰り返す

イージング関数

「視差効果を減らす」設定のユーザーには無効化

プレビュー

CSS コード

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

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

完全なCSSアニメーション（@keyframes ルール、animation 省略記法、任意の prefers-reduced-motion の上書き）を作成します。フェード、スライド、バウンス、パルス、シェイク、回転、ハートビートなどのプリセットから始めて、キーフレームを自由に編集し、ドラッグできるcubic-bezier曲線でタイミングを調整できます。

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

プリセットを選ぶか、独自のキーフレームを入力します（1行に1ルール）。
アニメーション名、再生時間、遅延を設定します。
方向、フィルモードと、無限に繰り返すまたは繰り返し回数を選びます。
イージング関数を選ぶか、cubic-bezierのハンドルをドラッグする（X1、Y1、X2、Y2を入力する）かします。
もう一度再生を押して再確認し、CSSコードをコピーします。

例

入力

Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off

出力

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated {
  animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
}

CSSアニメーションジェネレーターを使うべき場面

登場エフェクト、ローダー、注意喚起、マイクロインタラクションに使います。単純な状態変化（ホバーの色、サイズ）なら、CSSのtransitionで十分です。OSで動きを減らす設定にしているユーザーが大きな動きの影響を受けないよう、視差効果の軽減オプションは有効にしておいてください。

CSSアニメーションジェネレーターの仕組み

キーフレームのテキストは @keyframes name { … } で囲まれ、設定は標準的な省略記法の順序 name duration timing-function delay iteration-count direction fill-mode で書かれます。ベジェエディターは、X値を（CSSの要求どおり）0〜1に制限し、Yはバウンスのようなイージングのために超過できます。4つの値がCSSのキーワード（ease、linear、ease-in、ease-out、ease-in-out）と等しい場合は、代わりにキーワードが書かれます。名前は有効なCSS識別子にサニタイズされます。プレビューは専用のキーフレーム名を使うため、ページ自身のアニメーションと衝突しません。