Preparing your comprehensive developer toolkit
実用ガイド
キーフレームとイージング関数を備えたビジュアル CSS アニメーションエディター
CSS アニメーションにより、JavaScript を使用せずに要素をあるスタイルから別のスタイルに徐々に変更できます。@keyframes ルールは、アニメーション期間の異なるパーセンテージ（0%、50%、100%）で CSS プロパティを指定し、キーフレームと呼ばれる中間ステップを持つアニメーションシーケンスを定義します。アニメーションプロパティは、タイミング（継続時間、遅延）、繰り返し（反復回数）、方向（通常、逆、交互）、イージング（タイミング関数）を制御します。CSS トランジションは、プロパティの変更によってトリガーされる、よりシンプルな状態ベースのアニメーションを提供します。アニメーションはユーザーエクスペリエンスを改善し、視覚的なフィードバックを提供し、注意を導き、スムーズなパフォーマンスのためにハードウェアアクセラレーションされながら魅力的なインターフェースを作成します。
@keyframes は、さまざまなポイントで CSS スタイルを指定することでアニメーションシーケンスを定義します。構文：@keyframes name { 0% { property: value; } 50% { property: value2; } 100% { property: value3; } }。パーセンテージはタイムライン位置を示します（0% は開始、100% は終了）。代替キーワード：from (0%) と to (100%)。複数のプロパティを同時に変更できます。キーフレームは animation-name プロパティで参照されます。古いブラウザではブラウザプレフィックス (@-webkit-keyframes) が必要な場合があります。キーフレームは複数の要素で再利用可能です。
animation は 8 つのサブプロパティの短縮形です：animation-name（キーフレーム名）、animation-duration（時間長）、animation-timing-function（イージング）、animation-delay（開始遅延）、animation-iteration-count（繰り返し）、animation-direction（再生方向）、animation-fill-mode（前/後の状態）、animation-play-state（実行/一時停止）。短縮構文：animation: name duration timing-function delay iteration-count direction fill-mode play-state。カンマで区切られた複数のアニメーションが同時に適用されます。プロパティは細かい制御のために個別に設定できます。
タイミング関数は数学的曲線を使用してアニメーションのペーシングを制御します。組み込みキーワード：ease（遅い開始/終了、速い中間）、linear（一定速度）、ease-in（加速）、ease-out（減速）、ease-in-out（両方）。cubic-bezier(x1,y1,x2,y2) は制御点でカスタム曲線を作成します。値：x は 0-1 の間、y はバウンス効果のために 0-1 を超えることができます。cubic-bezier.com などのツールは曲線を視覚化します。steps(n, start|end) はステップアニメーションを作成します。ハードウェアアクセラレーションは 60fps パフォーマンスのために transform と opacity に適用されます。
スムーズな 60fps アニメーションの場合、レイアウトの再計算なしに GPU コンポジションをトリガーする transform（translate、scale、rotate）と opacity のアニメーション化を優先します。width、height、top、left、margin のアニメーション化を避けます（リフローを引き起こす）。will-change: transform を使用して、今後のアニメーションについてブラウザにヒントを与えます。同時アニメーションとキーフレームの複雑さを制限します。CSS containment（contain: layout style）を使用してアニメーションスコープを分離します。JavaScript トリガーアニメーションには requestAnimationFrame() を使用します。モーション削減メディアクエリはユーザーのアクセシビリティ設定を尊重：@media (prefers-reduced-motion) はアニメーションを無効化または簡素化します。
ビジュアルタイムラインインターフェースで @keyframes アニメーションを作成および編集。任意のパーセンテージでキーフレームを追加/削除、各ステップに CSS プロパティ（transform、opacity、color）を設定、ドラッグアンドドロップタイムライン付き
アニメーション継続時間、遅延、反復回数（無限または特定）、方向（通常/逆/交互）、フィルモード（前方/後方/両方）をリアルタイムプレビュー更新で設定
組み込みイージング関数（ease、linear、ease-in/out）から選択するか、ビジュアルエディターでカスタムキュービックベジエ曲線を作成。イージング曲線をプレビューし、異なるタイミング関数を比較
事前構築されたアニメーションプリセット：フェードイン/アウト、スライド（左/右/上/下）、バウンス、回転、スケール、パルス、シェイク、フリップ。プリセットをカスタマイズするか、複雑なアニメーションの出発点として使用
このツールは、コードを手動で書くことなく、視覚的にCSSアニメーションを作成するのに役立ちます。@keyframesアニメーションを生成し、タイミング関数を設定し、継続時間と遅延を設定し、すぐに使用できるCSSコードをエクスポートできます。ウェブ開発者、デザイナー、ウェブサイトにスムーズなアニメーションを追加する必要があるすべての人に最適です。
アニメーション設定を構成するだけです：アニメーション名を選択し、継続時間を設定し、タイミング関数（ease、linear、cubic-bezier）を選択し、遅延と反復回数を設定し、方向を設定します。ツールは@keyframesルールとアニメーションプロパティを含む完全なCSSコードを生成します。アニメーションをプレビューし、ワンクリックでコードをコピーできます。
はい、このCSSアニメーションジェネレーターは完全に無料です。登録、支払い、アカウント作成は不要です。制限や制約なく、すぐにオンラインで使用できます。
はい、ツールではカスタム@keyframesアニメーションを作成できます。transform、opacity、color、その他のアニメーション可能なプロパティを含む、異なるパーセンテージ（0%、50%、100%）でCSSプロパティを定義できます。生成されたコードには、@keyframes定義とそれを適用するアニメーションプロパティの両方が含まれます。
生成されたCSSアニメーションは、すべてのモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされている標準の@keyframes構文を使用します。古いブラウザでは、@-webkit-keyframesなどのベンダープレフィックスを追加する必要がある場合があります。ツールは、CSS3アニメーション仕様で動作する標準CSSを生成します。
最高のパフォーマンスを得るには、GPUアクセラレーションをトリガーするため、transformとopacityプロパティをアニメーション化します。width、height、margin、paddingなどのレイアウトプロパティのアニメーション化は避けてください。will-change: transformを使用してブラウザにヒントを与えます。ツールは最適化されたコードを生成しますが、キーフレームをカスタマイズする際はこれらのベストプラクティスを適用する必要があります。
はい、生成されたCSSコードは本番環境で使用できます。標準のCSSアニメーション構文とベストプラクティスに従っています。コードをコピーしてスタイルシートに貼り付けるだけです。特定のデザイン要件に合わせてアニメーション名を調整し、キーフレームをカスタマイズすることをお勧めします。
@keyframes とアニメーションプロパティの完全ガイド
ビジュアルキュービックベジエイージング関数エディター
80+ アニメーションを含むすぐに使える CSS アニメーションライブラリ
高性能 CSS アニメーションのベストプラクティス
すべてのイージング関数タイプのビジュアルリファレンス
ツールを開いて機能をお試しください。