CSS アニメーション ジェネレーター
6 つの一般的アニメーションパターン（fade・slide・bounce・spin・pulse・shake）から選び、duration・delay・timing function・iteration・direction・fill-mode をスライダーで調整。プレビューパネルで実 DOM 要素がアニメーション動作 — コピー前に実際の見た目を確認。生成された @keyframes ブロックと一致する `.box { animation: … }` shorthand をコピー。
プレビュー
生成 CSS
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 1s ease 0s 1 normal none;
}標準プロパティ使用 — ベンダープレフィックスなし。全モダンブラウザが unprefixed サポート。
使い方
- プリセット選択（fade・slide・bounce など）。
- duration・delay・easing・iteration・direction・fill-mode を調整。
- プレビュー確認後、生成 CSS をコピー。
よくある質問
- 終了後に元の状態に戻るのは？
- デフォルト `animation-fill-mode` は `none` — アニメーション中のみスタイル適用。`forwards` 設定で最終キーフレーム状態を保持。
- iteration `1` と `infinite` の違い？
- iteration はキーフレームを指定回数実行後停止。`infinite` は永久ループ — スピナーに有用だがオフスクリーン要素でも CPU 消費。
- `prefers-reduced-motion` と併用可能？
- はい。`.box` ルールを `@media (prefers-reduced-motion: no-preference) { … }` で包めばモーション過敏ユーザーは自動オプトアウト。
- `spin` で easing が見えない？
- Spin は等速回転 — 単一回転変数への easing はほぼ線形。easing は opacity・translate のような開始/終了状態を持つプロパティで最もよく見える。
関連ツール
CSS Cubic-Bezier カーブジェネレーター
コントロールポイントをドラッグして CSS イージング曲線を設計 — 動きをライブプレビュー、cubic-bezier() 値をコピー。
CSS Flexbox プレイグラウンド
flex-direction・justify-content・align-items・gap をクリックで調整 — CSS や Tailwind クラスをコピー。
CSS Grid プレイグラウンド
grid-template-columns / rows・gap・アイテム整列を視覚的に — CSS をそのままコピー。
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
Open Graph & Twitter Card ジェネレータ
フォーム入力で貼り付けるだけの `<meta>` ブロック — Facebook・LinkedIn・Slack 用 Open Graph と X・Discord 用 Twitter Card タグ。