6XC

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

キーフレームのプリセット（回転、パルス、バウンス、シェイク、フェード、スライド）を選び、再生時間と繰り返し回数を調整して@keyframesとクラスをコピー。

636回閲覧

CSSアニメーションとは

アニメーションは、何が変化するかを定義する@keyframesブロックと、どのように再生するか（再生時間・タイミング関数・繰り返し回数）を指定するanimationプロパティを組み合わせたものです。トランジションと違い、ホバーやクラスの切り替えを必要とせず単独で動作します。このジェネレーターは6種類のプリセットを用意しており、keyframesとすぐに使えるクラスの両方を出力します。

よくある質問

アニメーションとトランジション、どちらを使うべきですか？

トランジションは状態の変化（ホバー、クラスの切り替えなど）に反応して動きます。アニメーションは単独で動作し、無限にループさせたり、複数のステップを定義したりできます — スピナー、注意を引くパルス、登場エフェクトにはアニメーションを使いましょう。

動きを減らしたいユーザーへの配慮はどうすればいいですか？

アニメーションを@media (prefers-reduced-motion: no-preference) { … } の中に入れるか、reduce設定時には無効化してください。前庭感覚に敏感なユーザーに配慮した実装になります。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる