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

このツールについて

この CSS アニメーション作成ツールは、フェードイン、スライドイン、バウンスイン、パルス、回転、シェイク、ズームなど 14 種類のプリセットから @keyframes アニメーションを作成し、再生時間、タイミング関数、繰り返し回数を調整できます。

使い方

1. アニメーションのプリセットを選びます。
2. 再生時間、タイミング関数、繰り返し回数を設定します。
3. 「リプレイ」を押してプレビューします。
4. 「CSS をコピー」をクリックし、@keyframes と animation のルールを取得します。

知っておきたいこと

• CSS アニメーションは、@keyframes ルールと、要素に指定する animation プロパティの 2 つで構成されます。
• パフォーマンスの面では、transform と opacity をアニメーションさせるのが通常最もなめらかです。
• ease-out などのタイミング関数は速く始まってゆっくり止まるため、登場のアニメーションで自然に感じられます。
• 動きを減らす設定をしているユーザーのために、prefers-reduced-motion メディアクエリを尊重しましょう。
• 無限の繰り返しはローディング表示に向いており、登場エフェクトは通常 1 回だけ再生します。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問