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

CSS @keyframesアニメーションを視覚的に構築 · プリセットを選ぶか、長さ、変換、イージング曲線をカスタマイズします。本番対応のコードをコピーします。

プリセット

設定

プレビュー

ボックス

生成されたCSS

使い方

  1. アニメーションプリセットを選択: フェード、スライド、バウンス、回転、パルス、シェイクなどの一般的なアニメーションから選択します。
  2. 時間と動作をカスタマイズ: 期間、遅延、イージング関数、反復回数、フィルモードを調整します。
  3. CSSをコピー: 完全な@keyframes定義とアニメーションショートハンドプロパティが、スタイルシートに貼り付ける準備ができています。

なぜCSSアニメーションジェネレーターを使うのか?

CSSアニメーションは、インターフェースを生き生きとさせます, 重要な要素に注意を引き、視覚的フィードバックを提供し、洗練されたユーザー体験を作成します。@keyframesルールを手動で書くには、正しい構文、イージング曲線の名前、適切なプロパティの組み合わせを知る必要があります。このジェネレーターは、ライブプレビュー付きの精選されたアニメーションプリセットを提供し、各パラメータを微調整して、JavaScriptやアニメーションライブラリなしで本番対応のCSSを生成できるようにします。

機能

よくある質問

CSSのアニメーションとトランジションの違いは?

CSSトランジションは状態の変化(ホバー、フォーカス、クラスの切り替え)で発生し、2つの状態間でアニメーションします。CSSアニメーションは@keyframesを使って複数の状態を定義し、ユーザーの操作とは独立して実行されます, ループ、反転、自動開始ができます。

animation-fill-modeとは何で、なぜ重要なのか?

animation-fill-modeは、要素がアニメーション開始前(backwards)、終了後(forwards)、または両方のスタイルを保持するかどうかを制御します。forwardsがないと、要素はアニメーション終了時に元のスタイルに突然戻ります。

CSSアニメーションはパフォーマンスが良いですか?

transformとopacityのみを使用するアニメーションはGPUアクセラレーションされ、非常にスムーズです。width、height、margin、top/leftなどのレイアウトプロパティをアニメーション化することは避けてください, レイアウトの再計算をトリガーし、ジャンクを引き起こす可能性があります。60 fpsを達成するためにtransformとopacityにとどまります。

CSSアニメーションが実際に行うこと

CSSアニメーションは、JavaScriptなしで、定義されたキーフレーム間で時間をかけて1つ以上のCSSプロパティを補間し、目に見える動きや変化を生み出します。モデルには2つの部分があります: @keyframesルールはパーセンテージベースのステップ (0%から100%) でアニメーションがどう見えるかを定義し、animationショートハンドプロパティ (またはそのロングハンド兄弟animation-duration、animation-delay、animation-timing-function、animation-iteration-count、animation-fill-mode) はそのキーフレーム定義の再生方法をブラウザに指示します。ブラウザはすべての補間、イージング、フレームタイミングをC++で処理し、通常transformとopacityの変更にはGPUアクセラレーションされます。

アニメーションはCSSトランジションと2つの点で異なります。トランジションは要素の状態が変わるとき (ホバー、クラスのトグル、フォーカスイベント) に発火し、ちょうど2つの値の間で補間します: 古い値と新しい値。アニメーションは状態に依存せず実行され、任意の数のキーフレームステップに従い、無限にループでき、逆方向に再生でき、CSSまたはJavaScriptを介してトリガー、一時停止、再開できます。トランジションは「AからBへ0.5秒でスナップ」の正しいツールです; アニメーションは「この注目を引くパルスを永遠にループ」または「要素が表示されたときにこのエントリシーケンスを1回再生」の正しいツールです。

現代のWebデザインにとって、CSSアニメーションはJavaScriptライブラリを必要としていた膨大な量のものを置き換えます。スピナー、フェードイン、スライドアップ、注目パルス、成功チェックマーク: すべて今や標準のCSSパターンです。トレードオフは複雑なシーケンスの表現力です。CSSアニメーションは多くのことができますが、5〜7のキーフレームステップと同期したプロパティ変更で便利でなくなります; ストーリーボード化されたアニメーション、スクロール連動シーケンス、またはJavaScriptの状態に依存する動的なものには、専用ライブラリ (GSAP、Framer Motion、Web Animations API) が依然としてより良い選択肢です。

このツールがフードの下でどう動作するか

プリセット (例えば「bounce」または「fade-in」) を選択すると、ツールは事前定義された@keyframes文字列をプレビューエリアにロードし、プレビューボックスにanimationプロパティを適用します。キーフレームは実際のCSSで、カスタムフォーマットではありません: 見ているものがコピーして得るものです。スライダーは、リアルタイムでインラインanimationプロパティを編集することでアニメーションのタイミング値 (duration、delay、iteration count) を更新するため、プレビューはページのリロードなしですべての変更を即座に反映します。

イージング関数の選択は、標準のCSS timing-function値を使用します: linear (定速度) 、ease (デフォルト、開始と終了が遅い) 、ease-in (開始が遅い) 、ease-out (終了が遅い) 、ease-in-out (開始と終了が遅い) 、またはカスタムカーブの場合cubic-bezier(x1, y1, x2, y2)。表示されるアニメーションカーブは、ブラウザのネイティブtiming-function実装によって計算されます; プレビューはJavaScriptシミュレーションではなく、実際のブラウザレンダリング出力です。

コードボックスは、スタイルシートに投入するために必要な完全なCSSを示します: @keyframesブロックと.your-class { animation: ... }宣言の両方。「Copy CSS」をクリックすると、両方が1つのテキストブロックとしてクリップボードに書き込まれます。ファイルは生成されず、サーバーは何も処理せず、ツールには呼び出すバックエンドがありません。プレビュー、コード生成、クリップボードへの書き込みはすべて、デバイス上のJavaScriptで行われます。ページを更新すると、最初にコピーしていない限り、カスタム構成は失われます。

Webアニメーションの簡単な歴史

実世界のワークフロー

よくある落とし穴とその意味

プライバシー: すべてがあなたのブラウザで実行されます

CSSジェネレーターツールには2つのフレーバーがあります: クライアント側のJavaScriptを実行するシンプルなHTMLページ (プライベートで高速) と、プロジェクトを保存するクラウドエディタ (協力的だがプライバシーのトレードオフあり) 。このツールは最初のタイプです。スライダーの値、選択したプリセット、生成されたCSS: すべてブラウザセッションに残ります。ページを更新すると、最初にCSSをコピーしていない限り、状態は失われます。サーバーがアニメーションの選択を保存することはなく、テストしたプリセットを追跡する分析もなく、アカウントは必要ありません。

プライバシー特性は、主にプロプライエタリな設計作業にとって重要です。機密のクライアントプロジェクト用のアニメーションをプロトタイプするスタジオ、未発表のアプリのマイクロインタラクションに取り組む開発者、またはブランドキャンペーンを反復するデザイナー: 反復履歴または進行中の設計が作業に関する情報を漏らす可能性のあるすべてのコンテキスト。このツールでは、何も送信されないため、何もキャプチャされません。ブラウザのネットワークタブを開くと、使用中の送信リクエストはゼロです; 初期ページロードのみがHTMLとJavaScriptをフェッチします。

別のツールが正しい選択である場合

その他のよくある質問

アニメーションを1回だけ再生するにはどうすればよいですか?

animation-iteration-count: 1を設定します (指定されていない場合のデフォルト) 。完了後に要素がアニメーションの最終状態にとどまる (元のスタイルに戻らない) ようにするには、animation-fill-mode: forwardsも設定します。組み合わせたショートハンドはanimation: fadeIn 0.5s ease-out forwards;です。

アニメーションを一時停止して再開できますか?

はい、animation-play-state: paused (またはrunning) で。このプロパティをJavaScript経由 (例えばボタンクリック時) またはCSSで:hover経由で「ホバーで一時停止」パターンで切り替えます。アニメーションは現在の地点でフリーズし、runningに戻したときにそこから再開し、進捗を失いません。これはトランジションでも同じように機能しますが、ランタイム一時停止制御にはanimation-play-stateプロパティのみが存在します。

クリックまたはスクロール時にアニメーションをトリガーするにはどうすればよいですか?

クリックトリガーの場合、JavaScript経由でCSSクラスを切り替えます: element.classList.toggle('animate-in')。クラスが追加されるとアニメーションが実行されます。スクロールトリガーの場合、IntersectionObserverを使用して要素がビューポートに入るタイミングを検出し、その時点でクラスを追加します。現代のブラウザでは、CSS Scroll-driven Animationsが、JavaScriptなしでanimation-timeline: scroll()を介してアニメーションの進捗をスクロール位置に直接結びつけることを可能にします。

なぜアニメーションがちらついたりカクついたりするのですか?

ほとんどのちらつき/カクつき問題は、transform ベースの同等物の代わりにレイアウトトリガープロパティ (width、height、top/left) をアニメーションすることから来ます。left: 0をtransform: translateX(0)に切り替えると、アニメーションは滑らかになるはずです。その他の原因: 多くの半透明レイヤーからのオーバードロー、同じフレーム内でスタイルを読み書きするJavaScriptからのレイアウトスラッシング、またはアニメーション要素に過剰な影とフィルター。

アクセシビリティに重要なインターフェースでアニメーションを使用すべきですか?

使用してください、ただしprefers-reduced-motionを尊重してください。WCAG 2.1ガイドラインは、不要な動きを無効にするオプションを提供することを推奨しています。装飾アニメーションを@media (prefers-reduced-motion: no-preference)で囲み、OSの設定を行ったユーザーが静的な体験を得るようにします。重要なフィードバックアニメーション (ローディングインジケータ、エラーシェイク) は保持できます; 純粋に装飾的なものは敏感なユーザーに対してオプトインにすべきです。

カスタムイージングカーブにcubic-bezierを使用できますか?

はい。cubic-bezier(x1, y1, x2, y2)タイミング関数は、2つのコントロールポイントを使って任意のイージングカーブを定義できます。各x値は0と1の間です (時間を表す) 、y値は負の値または1より大きい値にすることができます (オーバーシュートとバウンス効果を可能にする) 。視覚的にカーブを選ぶには、当社のCubic BezierツールまたはLea Verouの古典的なcubic-bezier.comを使用してください。一般的なプリセット代替案: ease、ease-in、ease-out、ease-in-out、およびlinear-aliased CSS変数cubic-bezier(0.25, 0.1, 0.25, 1) (デフォルトのease) 。

関連ツール

CSSグラデーションジェネレーター CSSキュービックベジェジェネレーター CSSローダー／スピナー・ジェネレーター CSSフレックスボックス・ジェネレーター