AZ Tools

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 サポート。

使い方

  1. プリセット選択（fade・slide・bounce など）。
  2. duration・delay・easing・iteration・direction・fill-mode を調整。
  3. プレビュー確認後、生成 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 のような開始/終了状態を持つプロパティで最もよく見える。

関連ツール

JWT デコーダー

JWT のヘッダー・クレーム・有効期限を即座に確認。

開発00

UUID ジェネレーター

ランダムなバージョン 4 UUID をまとめて生成し、コピー。

開発00

ハッシュ生成 (SHA)

テキストから SHA-1・SHA-256・SHA-384・SHA-512 ハッシュを生成。

開発00

URL エンコーダー / デコーダー

URL 用にテキストをパーセントエンコード、または URL をデコード。

開発00

Base64 エンコーダー / デコーダー

テキストを Base64 にエンコード、または Base64 をテキストにデコード。

開発00

JSON フォーマッター & バリデーター

ブラウザで JSON を整形・並べ替え・圧縮・検証できます。

開発00