CSS Animation ジェネレーター - ビジュアルキーフレーム

A 各パーセンテージでスタイルを指定するアニメーション段階の定義。

A 繰り返しをinfiniteに。

A easeがデフォルト。linearは一定速度。

A 当社のCSSアニメーションジェネレーターは、最適化され、人間が読みやすいCSSコードを出力するように設計されています。ベンダープレフィックスを自動的に処理し、最新のCSSベストプラクティスに準拠しているため、生成されたアニメーションは本番環境で利用可能です。これにより、チームはクリーンで保守しやすいコードを受け取ることができ、コードレビューが簡素化され、手動での修正なしにプロフェッショナルなWebプロジェクトへのシームレスな統合が可能になります。開発者は、信頼できるコード品質で創造性に集中できます。

A 当社のツールで生成されたCSSアニメーションを動的に制御するには、JavaScriptを使用して要素のCSSプロパティやクラスを操作します。最も一般的な方法は、`animation-play-state: paused;` または `running;` を設定するクラスを切り替えることです。また、対象要素の `animation-name` や `animation` プロパティ自体を動的に削除または変更することも可能です。これにより、CSS定義を超えたプログラムによるアニメーションの開始、一時停止、停止が可能になります。

A もちろんです。ジェネレーター内の「持続時間」スライダーを見つけてください。左にドラッグすると時間が短縮され、アニメーションが速くなります。右にドラッグすると長くなります。ライブプレビューが即座に更新され、0.5秒のアニメーションと1.5秒のアニメーションがどのように見えるかが正確にわかります。これにより、その場でタイミングを微調整できます。

A はい、ただし明確な違いがあります。このツールはページ読み込み時またはCSSクラス経由で動作するアニメーションを生成します。ホバーエフェクトには、生成したアニメーションを自分で `:hover` 疑似クラスでラップする必要があります。専用のホバートグルはまだありません。スクロールトリガーにはJavaScript（Intersection Observerなど）が必要で、要素が画面に入ったときにクラスを追加します。ジェネレーターは核となるアニメーションを提供し、発動タイミングはあなたが制御します。実用的なヒント：コードをエクスポートし、デフォルトで `paused` 状態にし、スクロール時にJSで再開させてください。

A このジェネレーターは@keyframesブロック全体を生成するため、ホバー用のトリガーは含まれません。エクスポートしたコードを手動で:hover疑似クラスにラップする必要があります。たとえば、.my-elementを.my-element:hoverにリネームしてアニメーションコードを貼り付けてください。ライブプレビューは読み込み時の動作のみ表示するので、実際のホバー効果はご自身のエディタでテストしてください。教育用のデモで学生がCSSを直接確認するケースに最適です。

A 基本的には心配いりません。CSSアニメーションはメインスレッドではなくGPUで処理されるため、JavaScriptベースの方法よりはるかに効率的です。キーフレーム5つで構成される@keyframesブロック1つなら、ファイルサイズは約200バイト増えるだけ。同じ動きを5KBのjQueryプラグインで再現するのと比べてください。数十の複雑なアニメーションを同時に動かさない限り、パフォーマンスへの影響はほとんどありません。実用的なアドバイス: モバイル端末ではbox-shadowやfilterのアニメーションは避けましょう。それらは今でも重い再描画を引き起こします。

A 原因はほぼ、間違ったプロパティをアニメーションさせていることです。transformとopacityだけ使いましょう。これらはGPUで処理され、60fpsを維持できます。widthやheight、marginをアニメーションすると、毎フレームレイアウト計算が走り、カクつきます。当ツールは初期設定でtransformとopacityのみ生成するよう設計されています。確認方法：DevToolsのPerformanceタブを開き、数秒録画。紫色のLayoutバーが表示されたら、それが滑らかさを損なう原因です。