すべての開発者はブロックをコピーしました @keyframes stack Overflow の回答から、それを貼り付けてリフレッシュすると、要素が完全に静止していることがわかりました。 10 回中 9 回、その理由は退屈です。のアニメーション名です @keyframes ルールは、の名前と一致しませんでした animation 速記、または継続時間がゼロになったままになった、またはクラスが要素に着地しなかった もう 1 つの理由は、キーフレーム アニメーションが CSS のコーナーの 1 つで、コードを読んで結果を判断できないためです。パーセンテージと変換のシーケンスでは、動作を見るまで、動作が滑らか、きびきび、船酔いに感じられるかどうかについては何もわかりません。
CSS アニメーションは、時間をかけて名前付きの一連のスタイルを通じて要素を移動するための browser' s メカニズムです。 1 つの変更をアニメーション化してトリガーを待つトランジションとは異なり、アニメーションは a に続きます @keyframes 好きなだけステップを入れたスクリプトは、永遠にループでき、適用された瞬間に自動的に開始されます。これは、ローディング スピナー、注意パルス、入場効果、およびインターフェイスを生き生きとさせるアンビエント モーションのあらゆる部分に力を与えるものです。しかし、キーフレームと速記という 2 つの半分は正確に一致する必要があり、速記はほとんどの人が覚えていない順序で 7 つまたは 8 つの値を 1 行に詰め込んでいます。
ザ・ CSS Animation Generator 推測を取り除きます プリセットのライブラリからモーションを選択し、継続時間、イージング、ディレイ、イテレーションカウントと方向を調整し、ライブプレビュー要素で再生されるのを見ます ツールは両方を書き込みます @keyframes ルールとマッチング animation 名前をすでに同期させた状態でコピー準備完了ボックスに短縮できるため、貼り付けたブロックは初めて機能します。
tl;dr: CSS アニメーションは、要素を a 内で移動します
@keyframesシーケンスは時間の経過とともに、トランジションとは異なり、トリガーは必要なく、ループできます。ザ@keyframes名前とanimation-name正確に一致する必要があります。これは、アニメーションが何もしない最も一般的な理由です。速記には、名前、継続時間、タイミング関数、遅延、反復カウント、方向、および塗りつぶしモードが表示されます。アニメーションを好みますtransformあんどopacityスムーズで合成されたモーションを実現します。このジェネレーターは、14 個のプリセット、完全な再生コントロール、ライブ プレビューを提供し、キーフレームと速記の両方を一緒に送信します。サインアップなしで完全にブラウザー内で実行されます。
CSSアニメーションジェネレーターはどのような問題を解決しますか?
キーフレーム アニメーションの厄介な点は往復です。バウンスを手で調整するには、 を書きます @keyframes ルール、書き込みます animation ライン、ファイルを保存し、ブラウザに切り替えて、リロードを待って、見ます バウンスが攻撃的すぎる場合は、1 つを変更します translateY 値を設定し、ループ全体をもう一度実行します。そのサイクルが遅いため、ほとんどの人は、正しく感じられるバージョンではなく、壊れているように見えない最初のバージョンを受け入れます。この 2 つの違いは、まさに、考慮されたインターフェイスとテンプレートを分離する磨きです。
1 回のクリックでループするジェネレータが折りたたまれます プリセットを選択し、デュレーションスライダーをドラッグすると、プレビュー要素が目の前のモーションをすぐに再生します タイミング機能をから切り替えます ease ベジール曲線にすると 感触の変化は瞬時に起こります 反復カウントを無限に設定し アニメーションループも設定して 勉強できるようにします これを数分後に 1200 に対して 600 ミリ秒がどのようなものか 直観を構築します これは他の場所で適切な動作を決定するために必要な感覚です。
正しさの議論もあります 不正な形を作り出すことはできません animation メニューから選択してスライダーをドラッグすることで値を設定し、キーフレーム名を入力ミスすることはできません。, ツールは、それが生成したキーフレームに速記をバインドするため、.出力は常に貼り付けに安全です。, その信頼性は、私は他のプロパティのために近い視覚的なCSSビルダーを保つ同じ理由です, のために手を伸ばすの背後にある同じ本能 グラディエントジェネレータ 数える代わりに、私の頭の中で色が止まります box-shadow generator ぼかし半径で推測する代わりに.
CSSアニメーションはCSSトランジションとどう違うのですか?
これは人々を絶えずつまずかせるので 正確である価値があります トランジションは2 つの状態の間で 1 つのプロパティをアニメーション化し 変化させるものが必要です ホバー フォーカス トグルしたクラスです 実行前には開始値と終了値があり その間には何もありません 対照的にアニメーションは a に続きます @keyframes 任意の中間ステップを定義できるルール。これにより、要素は A から B への直線ではなく、振り付け全体を通過できます。また、何も待たずに適用して再生します。
実用的な帰結は、状態変化を滑らかにしたいときにトランジションに手を伸ばす、アニメーションのために要素に固有のモーションを望むとき、ホバーで暗くなるボタンはトランジションである、永遠に回転するスピナー、目を描くためにパルスするバッジ、またはページの読み込み時にスライドして上へ上がるカードはすべてアニメーションである、なぜならモーションはそれ自体で起こり、しばしば繰り返されるからである、与えられたエフェクトにどれが必要かをまだ決めているなら、経験則は単純である:ユーザーアクションがそれを開始し、それが一方向に進むならば、トランジションを使用する; それ自体が再生され、ループし、または2 つ以上のステップがあるならば、アニメーションを使用する CSS 遷移 ジェネレータ 最初のケースのコンパニオン ツールであり、この 2 つはこれから書くモーションのほとんどをカバーします。
| アスペクト | トランジション | アニメーション |
|---|---|---|
| トリガー | 状態変更(ホバリング、フォーカス、クラス)が必要です | 適用するとそれ自体で始まります |
| ステップ | 2つ目は、始まりと終わりです | 任意の数字、経由 @keyframes |
| ルーピング | いいえ、1 回の変更につき 1 回実行されます | はい、付き iteration-count |
| 通常の使用 | ホバーとフォーカスの効果 | スピナー、パルス、入り口 |
アニメーションの速記は正しい順序は何ですか?
ザ・ animation 速記は濃密です キーフレーム名、継続時間、タイミング関数、遅延、反復カウント、方向、フィルモード、再生状態をすべて 1 行で運ぶことができ、順序は遷移の場合とまったく同じ方法で 2 つの時間値に重要です。このジェネレーターは、たとえば、最初に名前を書き、次に継続時間とタイミング関数を書き、次にオプションの遅延を書き、次に反復カウント、方向とフィルモードを書きます animation: fadeIn 0.6s ease 1 both。キーフレーム名は CSS キーワードではなく、最後に名前を埋めるよりも読みやすいため、最初に名前を書くことは合法です。
全員を捕捉する1 つのルールは2 つの時間値です 持続時間と遅延はどちらも時間であり CSSは位置だけで区別します 1 つ目の時間値は持続時間 2 つ目は遅延です 速記中の他の全てはキーワードか単位のない数値です だから時間と混同できないのです だからツールはゼロになったときに安全に遅延を落とすことができます なぜなら単位のない 1 または言葉 infinite 以下が間違いなく反復カウントであり、2 回目ではありません。ジェネレーターは CSS デフォルトに等しい値も省略するため、a normal 方向または none fill-mode は出力を乱雑にすることはありません。その結果、ルールを知ったら手で書く方法を読み取る短縮形が得られます。
CSSアニメーションが再生されないのはなぜですか?
これが崖です ほとんど誰もが一度はそこから立ち去ります 最も一般的な原因は 1つだけの間にある不一致です animation-name そして、の名前 @keyframes ルール。 typo、大文字の差、または名前がある場所で他の場所ではなく名前が変更されたブラウザは、バインドするキーフレームルールがないままになっているので、それは静かに何もしない エラーと警告はありません; 要素は単にそこに座っている このジェネレータは同じ名前から両方の半分を一緒に書き込むため、そのクラスのバグ全体が消えます。 、ポイントの大きな部分です。
他の原因は、アニメーションを手書きすると現れるため、知る価値があります。 0 の持続時間は、アニメーションが即座に完了し、それが表示されないことを意味します。 である要素 display: none はそのアニメーションを全く実行しないので、レンダリングされる要素に依存するフェードインは発火しません。 keyframe 内のプロパティの欠落やスペルミスはフラグを立てるのではなく、静かに無視されます。 と を持つアニメーション animation-fill-mode: none、デフォルトでは、終了する瞬間に要素を全会一致のスタイルに戻します。ライブプレビューでアニメーションを見ると、動きが微妙だった場合は実行されなかったように見えます。これらのほとんどは数秒で表示されます。これは、リロードし続けるファイルではなく、表示できる動きを構築する場合に当てはまります。
アニメーション-フィル-モードは何をしますか?
塗りつぶしモードは、人々が最後に理解し、最も必要とする設定です。 animation' s アクティブウィンドウの外で、要素がどのようなスタイルを表示するかを決定します。 、遅延中に開始する前と終了後の両方。 デフォルト、 none、つまり、アニメーションが実行されていないときに、要素が最初と最後のキーフレームを無視するので、アニメーションの前に通常のスタイルに座って、その後それらにスナップバックすることを意味します そのスナップバックは非常に一般的なフラストレーションの原因です: 要素をフェードインするようにアニメーション化し、美しくフェードインし、アニメーションが終了した瞬間に再び消えます none the final opacity: 1 アニメーションが終了すると、キーフレームは破棄されます。
修正は animation-fill-mode: forwardsこれにより、アニメーション終了後に適用された最後のキーフレームが維持されるため、フェードインされた要素が見えたままになります。 backwards アニメーション開始前の遅延中に最初のキーフレームを適用します。これは、遅延があり、最初に要素がデフォルト状態でフラッシュしたくない場合に便利です。 both は両方を一度に実行し、入口アニメーションにとって最も安全な一般的な選択肢であるため、このジェネレーターでは新しいアニメーションがデフォルトになります both。 fillモードを理解することは着地する入口と元に戻す入口の違いであり、仕様コールドを読むよりもプレビューで切り替えてエンディングが変わるのを見る方がはるかに把握しやすい。
アニメーションのループはいつ行うべきですか?また、それを制御するにはどうすればよいですか?
反復カウントはアニメーションの実行回数を決定します。 positive整数に設定し、アニメーションはそれを何度も繰り返してから停止します; に設定します infinite そしてそれは永遠にループします ループするアニメーションは、アンビエント、進行中のモーション、仕事が起こっていることを示すスピナー、コールトゥアクションを生かし続けるパルス、ヒーローのイメージにいくらかの人生を与える微妙なフロートのための正しい選択です ワンショットアニメーション、一度実行すると、出入り口のためのものであり、モーションの始まりと終わりが明確で、それを繰り返すと気が散るでしょう。
方向は反復カウントとペアになり、各パスの実行方法を形作ります。 default normal 最初のキーフレームから最後のキーフレームまでのすべての反復を再生します。 reverse それぞれを逆再生します. alternate 最初のパスを前方に進み、次のパスを後方に進み、エンドポイント間でピンポンを行います。これにより、キーフレームでリターン トリップを定義せずにスムーズな前後パルスを構築できます。 alternate-reverse 後方から開始し、そこから交互に 発電機は4 つすべてを公開するので、違いを感じることができます: とのパルス alternate 同じキーフレームで自然に息を吹き込み、息を吹き出します normal そして偶数のステップがリターン自体をエンコードしなければなりません ループ動作の場合、 alternate ほとんどの場合、キーフレームの作業が少なくなり、より有機的な結果が得られます。
スムーズなパフォーマンスを実現するには、どのプロパティをアニメーション化する必要がありますか?
アニメーション化するプロパティは、モーションが 1 秒間の滑らかな 60 フレームで実行されるか、スタッターで実行されるかを決定し、選択はトランジションの場合と同じです。 を好みます transform あんど opacityどちらも、ブラウザーがページレイアウトを再計算することなく、コンポジターに渡してアニメーション化することができるため、控えめなハードウェアでも、負荷がかかっても、スムーズに動作し続けることができるため、カードがスライドして上に移動します transform: translateY 同じカードがアニメーション化されている間、楽に感じます top や margin-top 荒れているように感じます このジェネレーターのプリセットされたすべての入口は、上に構築されています transform あんど opacity まさにこの理由で。
キーフレームシーケンスでアニメーションを避けるプロパティは、レイアウトをトリガーするものです: width、 height、 top、 left、 margin あんど padding。 これらのいずれかを変更すると、ブラウザは要素とその周囲のすべてのジオメトリをすべてのフレームで再計算する必要があります。これは高価であり、ジャンキー アニメーションの最も一般的な原因ですが、アニメーションがループしてそのコストを継続的に支払うときに悪化します。要素を成長させたい場合、a transform: scale ほとんどの場合、アニメーションよりも安価です width あんど height、そしてそれはほぼ同じように見えます。 安価な道に向かってあなたを導くツールのセットを組み立てるためのより広範な議論は、にあります Web 開発者ツールキット 動きをゆっくりとした意思決定ではなく迅速な意思決定にするワークフローの習慣は次のとおりです 開発者の生産性向上ツール ガイド.
ジェネレータはどのようにプレビューを正直なままにしますか?
すべてのビジュアルビルダーは、ツールが再現しない値を教えるまで、プレビューとエクスポートされたコードが離れてドリフトする危険性があります このジェネレーターは、正確に注入します @keyframes ページに出力し、その正確なものを適用するルール animation 省略するとプレビュー要素に表示されるため、表示するモーションはコピーした CSS が生成するモーションです。同意できない別々のアニメーション パスはなく、プレビューのキーフレーム名は出力内の名前です。
アニメーションはマウントで実行され、その後終了するため、プレビューにはそれをリプレイする方法が必要で、ツールはリプレイを押したときにプレビュー要素を再マウントすることでこれを処理します。これは、ワンショット アニメーションが本番環境でどのように動作するかを反映しており、要素が表示されたときに再生され、その後フィル モードに従って最終状態を保持します。出力も最小限のままで、ゼロ遅延とデフォルト値をドロップして、意味のある宣言のみをコピーします。 、実行されている冗長なものを何も放出しないという同じ規律です CSS フィルター ジェネレーター そして他のビジュアルビルダーです キーフレームアニメーションと 要素を配置するレイアウトをペアリングすると flexbox generator 周囲の構造物を構築するための自然な仲間です。
CSSアニメーションをサポートするブラウザは何ですか?
CSSアニメーションは現在のすべてのブラウザでサポートされており、10 年以上にわたってサポートされています。 ザ @keyframes ルール、 animation 速記とそのすべてのロングハンドはユニバーサルで接頭辞が付けられていないため、このジェネレーターの出力は、ベンダー プレフィックスやフォールバックなしで Chrome、Firefox、Safari、Edge で動作します。決定的な参照は、速記の各部分がどのように動作するかについての主要なソースである W3C の CSS アニメーション レベル 1 仕様であり、ジェネレーターがピースの動作について物理的な感触を与えたら読む価値があります。アクセシビリティについては、一部のユーザーが a を設定していることを覚えておいてください prefers-reduced-motion 好みに応じて、不要なループ アニメーションをメディア クエリでラップして、それを尊重することをお勧めします。これにより、不快に感じる人のためにアンビエント モーションをオフにすることができます。
より幅広いビジュアル CSS ツール、トランジション ジェネレーター、および CSS トランスフォームジェネレータ トランスフォームはこれらのアニメーションのほとんどが移動し、トランジションは状態変更を処理する原材料であるため、このアニメーションと並んで自然に座ります。アニメーションはそうではありません。ここにあるものはすべてクライアント側で実行され、コピーした CSS はランタイム、ビルド ステップ、依存関係なしで使用できます。
よくある質問
CSSアニメーションジェネレータとは何ですか?
CSS アニメーション ジェネレーターは、選択した設定からキーフレーム アニメーションを構築するビジュアル ツールです。プリセットを選択し、継続時間、緩和、遅延、反復カウント、方向を設定すると、出力されます @keyframes ルールと animation 速記とリプレイできるライブプレビュー。
CSSアニメーションとCSSトランジションの違いは何ですか?
トランジションは2 つの状態間の1 つの変化をアニメーション化し、実行するにはホバーなどのトリガーが必要です。 aの後にアニメーションが続きます @keyframes 任意の数のステップを含むシーケンスはループでき、状態の変化を待たずに適用されるとすぐに自動的に開始されます。
アニメーションの速記ではどのような順序が使用されますか?
このツールは、最初にキーフレーム名を書き、次に duration、timing-function、delay、iteration-count、direction と fill-mode を書き、例えば animation: fadeIn 0.6s ease 1 both を書きます。 first time value は常に duration、second は delay となるので、1 つの time value を duration と読みます。
CSSアニメーションのループを永遠にするにはどうすればよいですか?
反復カウントを無限に設定します。 animation: spin 1s linear infinite のように、単語 infinite である速記では、任意の正の整数は代わりに、何度もアニメーションを繰り返してから、塗りつぶしモードと方向に従って停止します。
CSSアニメーションが再生されないのはなぜですか?
最も一般的な原因は、animation-name と @keyframes の名前の不一致で、タイプミスや大文字と小文字の違いなどがあり、ブラウザーにバインドするルールがありません。また、ディスプレイ上のアニメーション (none 要素) が実行されないため、継続時間がゼロを超えており、要素がレンダリングされていることも確認してください。
animation-fill-mode プロパティは何をしますか?
塗りつぶしモードでは、アニメーション開始前と終了後に要素に表示するスタイルを決定します。 デフォルトの none では、アニメーションが終了すると要素が通常のスタイルに戻ります。 forwards を設定すると、最後のキーフレームが維持され、backwards では遅延中に最初のキーフレームが適用され、両方がその両方を実行します。
スムーズなパフォーマンスを実現するには、どのプロパティをアニメーション化する必要がありますか?
変換と不透明度を好みます。ブラウザはレイアウトを再計算せずにコンポジター上でアニメーション化できるため、60fps でスムーズに維持できます。幅、高さ、上部、左、または余白をアニメーション化すると、すべてのフレームでレイアウトの再計算が強制されます。これが、アニメーションがどもる通常の理由です。
生成されたアニメーションCSSは無料で安全に使用できますか?
はい。このツールは完全に無料で、サインアップや使用制限はなく、最新のすべてのブラウザでサポートされている標準の接頭辞なしの CSS を送信します。すべての処理はブラウザで行われるため、アップロードされるものは何もなく、ツールはロードされるとオフラインで動作します。
