視覚的にCSSキーフレームアニメーションを作成。16のプリセットから選択し、タイミングをカスタマイズし、コードを即座にコピー。
このツールは、コードを書かずにCSS @keyframesアニメーションを作成するのに役立ちます。フェード、バウンス、パルス、回転など16の組み込みプリセットから選択し、再生時間、遅延、イージングなどをカスタマイズできます。変更をリアルタイムで確認し、本番環境で使用可能なCSSを即座にコピーできます。
CSS @keyframesは、アニメーションシーケンスの中間ステップを定義します。主要なパーセンテージ(0%、50%、100%)でCSSスタイルを指定し、ブラウザがそれらの間を補間してスムーズなアニメーションを作成します。
はい!生成されたCSSは、すべての最新ブラウザでサポートされている標準の@keyframesとanimationプロパティを使用します。JavaScriptランタイムは不要です。
生成されたCSSクラスを一緒に使用するか、ショートハンドプロパティでカンマ区切りでアニメーション名を連結することで、複数のアニメーションを組み合わせることができます。