CSS Animation Generator

CSS アニメーション ジェネレーターは、CSS キーフレーム アニメーションのビジュアル エディターです。フェードイン、スライド、ズーム、バウンス、スピン、パルスなどのモーション プリセットを選択し、持続時間、タイミング機能、遅延、反復回数、方向、塗りつぶしモードを調整し、ライブ プレビューで実行するのを見て、モーションを定義する @keyframes ルールとそれを再生するアニメーションの短縮形の 2 つをコピーします。これは、ほとんどの人がメモリまたはフレームワークからコピーする CSS のブロックを、スタイルシートに到達する前に形作って確認できるものに変えます。

CSS アニメーションには、同意する必要がある 2 つの半分があります。 @keyframes ルールは一連のステップに名前を付けます。各ステップは、要素がその時点で保持すべきプロパティ値 (たとえば、不透明度 0 では 0%、不透明度 1 では 100%) でオフセットされたパーセンテージで書かれます。アニメーション プロパティはそのキーフレーム名を参照し、そのキーフレーム名の再生方法を制御します。キーフレームの持続時間、緩和方法、開始までの待ち時間、繰り返し回数、各パスの実行方向などです。スペルミスの名前は、ブラウザにバインドするルールがないため、アニメーションが静かに何もしない最も一般的な理由です。

すべてブラウザで実行されます プリセットを選択し、デュレーションとディレイスライダーをドラッグし、イージングカーブを切り替え、アニメーションを永久または固定回数繰り返すように設定し、リプレイを押して再度見ます ツールはキーフレーム名を最初に安全な順序で速記を書き込み、ゼロになったときにディレイを削除し、出力が読みやすいようにCSSデフォルトに一致する部分を省略します アカウントはなく、何もアップロードされず、ページがロードされるとジェネレーターは動作し続けます。

また、パフォーマンスのトレードオフも可視化されます。 プリセットは可能な限り変換と不透明度をアニメーション化します。これら 2 つのプロパティはコンポジターによって処理され、ブラウザーにレイアウトの再計算を強制しないため、高いフレーム レートでスムーズに維持されます。 width、height、top、または margin をアニメーション化すると、代わりにすべてのフレームでページが再計算され、吃音の通常の原因となります。 top ではなく translateY から構築されたバウンスを確認すると、そのページについてどれだけ読んだよりもスムーズになる理由についての教訓が早くなります。