CSS キーフレーム アニメのテンプレート

機能

• プリセット七種：フェードイン・上へスライド・ポップ・パルス・シェイク・回転・浮遊
• 時間は 100〜10000ms、イージングは五種類
• 無限ループまたは一度だけ
• プレビューはループ再生し、ホバーで一時停止して特定のフレームを確認できます
• `prefers-reduced-motion` の処理を自動で添付 —— システムの設定を尊重します
• アニメーション名にランダムな接尾辞。既存の同名キーフレームと衝突しません
• 出力は `@keyframes` とそれを使うルールの両方を含み、そのまま貼れます
• コードはハイライト付き、コピーはボタン一つ
• 計算はすべてブラウザー内で完結します

使い方

1. アニメーションを選ぶと、プレビューがすぐループ再生を始めます
2. 時間とイージングを調整 —— 回転は linear に。イージングを使うと一周ごとに引っかかって見えます
3. ループか一度きりかを選びます
4. コードをコピーします。`prefers-reduced-motion` のブロックも一緒にどうぞ

よくある質問

なぜ `prefers-reduced-motion` が自動で入るのですか？

アニメーションは人を不快にするからで、これは小さな話ではありません。 前庭機能障害（内耳の問題）のある方は、移動や拡大縮小のアニメーションでめまいや吐き気を感じます。OS にはそのための設定があり、それが `prefers-reduced-motion` です。三行を添えれば、そうした利用者があなたのページでつらくならずに済みます。費用は CSS 三行です。これは「アクセシビリティの加点要素」ではなく、「人を傷つけない」ための最低線です。

アニメーション名の後にランダムな文字が付くのはなぜですか？

`@keyframes` の名前はグローバルだからです。プロジェクトにすでに `fade-in` があると、貼り付けたブロックがそれを上書きします（あるいは上書きされます）—— 症状は「一部の場所で別のアニメーションになる」というもので、出たり出なかったりし、追跡が非常に困難です。ランダムな接尾辞があれば衝突は起こりません。副次的にもう一つの罠も解決します：名前が変わるとブラウザーはキーフレームが変わったと見なし、パラメーターを調整したときに再生し直します。

無限ループのアニメーションの問題は？

二つ。第一に注意を奪い続けること —— 動き続けるものは視線を引き寄せます。アニメーション自体が「状態」（ローディング表示など）である場合を除き、無限再生は避けるべきです。第二にコンポジター スレッドを占有し続けること —— 低スペック端末や省電力モードで消費電力に響きます。表示器はループさせ、ヒントや装飾的な浮遊は一、二回で止めるか、`animation-iteration-count: 3` のように回数を制限してください。

入場アニメーションを「順に現れる」ようにするには？

各要素に増加する `animation-delay` を与えます：一つ目 0ms、二つ目 80ms、三つ目 160ms。注意点が二つ。合計は五、六項目までに（それ以上だと後ろの要素が現れる頃には利用者は視線を外しています）。そして遅延中は要素が開始状態（透明やずれた位置）を保つので、「一度現れてから跳ぶ」のを避けたいときは `animation-fill-mode: backwards` を添えてください。