安価に感じるインターフェイスと考慮される感じのインターフェイスの違いは通常秒の5 分の1 です。 あなたのポインターがそれに触れる瞬間そのホバー色にスナップするボタンは突然として読む; 200 ミリ秒以上のその色に緩和する同じボタンは終了として読むその緩和はCSSの遷移であり、そしてとても小さい何かのためそれは私がそれが間違ったことを見たどのくらいの頻度で、基本状態ではなくホバー状態に置かれ、十数回の更新にわたって試行錯誤によって調整され、または全くアニメーション化できない特性に適用されたか注目に値します。
トランジションは、プロパティの 2 つの値間の変化を瞬時に切り替えるのではなく、時間の経過とともにアニメーション化するブラウザ & #39; の方法です。これは、ホバー効果、フォーカス状態、拡張パネル、切り替えクラスの背後にある主力であり、ほとんどの場合、誰でもプロジェクトに追加する最初のモーション ビットです。しかし、速記は 4 つの値を固定順序で 1 行に詰め込み、タイミング関数はモーションの感じ方を決定する部分であり、よく知られている崖の人が何かをフェードインしようとすると落ちてしまいます display: none。プレイできるトランジションを構築すると、すべてが節約されます。
ザ・ CSS Transition Generator プロパティを選択し、ミリ秒単位で継続時間と遅延を設定し、CSS キーワードとキュレーションされた立方ベジエ曲線のセットからタイミング関数を選択できます。いくつかのトランジションを 1 つの速記に積み重ねることができ、トリガー ボタンがライブ プレビュー要素でモーションを再生するため、コミットする前に緩和を感じることができます。正確な宣言は、下のコピー対応ボックスにあります。
tl;dr: CSS 遷移は、設定された継続時間にわたってプロパティの 2 つの値間の変化をアニメーション化します。これはホバー状態ではなく基本状態に属するため、要素は両方向に緩和されます。短縮順序は、プロパティ、継続時間、タイミング関数、遅延です。遷移することはできません
display、中間値がないので、アニメーションを好むはずですtransformあんどopacityスムーズなパフォーマンスを実現します。このジェネレーターは、ライブ ホバー プレビューですべての部分を公開し、複数のレイヤーをサポートし、クリーンな CSS を送信します。サインアップなしで完全にブラウザーで実行されます。
CSS遷移発生器が解決する問題は何ですか?
トランジションの難しい部分は構文ではありません。それは、モーションを読んで判断できないことです。 transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 特定の跳ね返りのしやすさについて説明していますが、その跳ね返りがボタンに適しているかどうかを知る唯一の方法は、それが起こるのを見ることです。そして、自分のプロジェクトでそれが起こるのを見るということは、ルールを書き、ホバリング状態を設定し、保存し、要素をマウスで移動し、その後 1 つの数値を調整してすべてを再度実行することを意味します。そのループは十分に遅いため、ほとんどの人は、最も快適に感じることよりも、最初に機能することに落ち着きます。
ジェネレーターがそのループをワンクリックに変えます持続時間を設定してトリガーを押すとプレビュー要素が目の前のトランジションを再生しますタイミング機能を変更してもう一度押すと直線的なスライドとイーズアウトの違いがすぐに落ち着くのを感じます数周すると200 ミリ秒対500 秒の感覚が養われますこれは邪魔になる動きから助ける動きを分ける直感です満足すると動いているCSSは既に書かれているので書き起こすものは何もありません。
ここでは、他のビジュアル CSS ビルダーと同じ信頼性引数が適用されます。つまり、不正な形式を生成することはできません transition スライダーをドラッグしてメニューから選択することで値を設定できるため、出力を常に安全に貼り付けることができます。これが、この種のツールを近くに保つ理由です。 に手を伸ばす背後にある同じ本能です CSS トランスフォームジェネレータ 頭の中で度数を数えるのではなく、変換が必要なとき。
ベース状態とホバー状態のどちらで遷移はどこへ行くのでしょうか?
これは私が最も目にする間違いであり、修正が非常に簡単であるため、明確に述べる価値があります。遷移は要素に属します& #39; s ベース状態、その上ではありません :hover ルール。 transition が基本状態で宣言されると、ブラウザはプロパティを両方向にアニメーション化します。ポインタが到着するとホバーチェンジに容易になり、ポインタが離れると元に戻ります。その対称性がインタラクションを完全なものに感じさせます。
トランジションのみをオンにします :hover そして偏った効果が得られます 要素がホバリングされている間に遷移が存在しますが、ポインタが離れる瞬間には、プロパティは途中でスムーズにアニメーション化されます :hover ルールは適用されなくなり、遷移はそれに伴い、プロパティは即座にスナップバックします。その結果、ボタンは優雅に緩和され、その後、まったくアニメーションがないよりも悪く見えます。 generator' s 出力は基本状態に進むように書き込まれ、ガイダンスはまさにこの理由でツールにベイクされます。 1回、要素自体に宣言し、状態の変化がそれをトリガーします。
遷移速記の正しい順序は何ですか?
ザ・ transition shorthand は 4 つの値までを 1 行に詰め込み、プロパティ、デュレーション、タイミング関数、遅延の順序が仕様によって固定されます。それで transition: opacity 300ms ease-in-out 100ms は、hundred-millisecond delay の後に ease-in-out 曲線を使用して、300 ミリ秒以上アニメーション化された不透明度プロパティを意味します。 get the order wrong and the browser either ignores the declaration or reads it as something you did not intend.
人を捕まえる1 つのルールは2 つの時間値です 持続時間と遅延はどちらも時間です CSSは純粋に位置によって区別します 1 つ目の時間値は常に持続時間です 2 つ目は常に遅延です 1 つだけの時間値を書くと持続時間として読み取られ 遅延はデフォルトのゼロに留まります これが、あまりに早く始まるように見える遷移が 誤って最初に書き込まれた遅延の場合が多い理由です ジェネレータは正しい順序であなたのための速記を構築することで問題全体を回避し、ゼロになると遅延を完全に省略するため、後続を出荷することはありません 0ms それは何もしません. ここにテーブルの解剖学的構造があります.
| パート | 例 | 制御するもの |
|---|---|---|
| 財産 | opacity |
どのプロパティがアニメーション化されるか、または all すべてのアニメータブル 1 つに対して |
| 期間 | 300ms |
アニメーションの所要時間; 最初の時間の値 |
| タイミング機能 | ease-in-out |
運動の加速曲線 |
| 遅延 | 100ms |
開始前にどのくらい待つか; 2 番目の時間値 |
なぜ私の表示は、アニメーション化されない: なし遷移?
これが崖です ほとんど誰もが一度はそこから立ち去ります 要素がフェードインしたくなるので 移行します display から none にする block と セット opacityと、要素はフェードなしで現れるだけ。 という理由は根本的である: display は animatable プロパティではありません。 の間に中間点はありません none あんど block、ブラウザが50 パーセントマークで補間できる値がないため、tweenには何もありません。 変更は即座に起こり、要素が最初からレンダリングされなかったため、上に重ねた不透明度アニメーションはすべて切断されます。
古典的な修正はアニメーション化することです opacity あんど visibility 一緒に去って display out of it. visibility 移行できる理由は、これも離散的なプロパティですが、デュレーションとペアリングすると、ブラウザーは途中で不透明度のフェードが完了するまで要素を表示したままにすることができるためです。 最新の修正は次のとおりです transition-behavior: allow-discrete、のような離散プロパティをアニメーション化できる新しい機能 display 移行の終点では、本当にフェードインできます display: none それをサポートするブラウザでは.いずれにせよ,教訓は同じです.なぜ何も動かないのかと1 時間を費やす前に,遷移しているプロパティが中間値を持っていることを確認します.これはライブプレビューが数秒で表面化するようなガッチャであり,これは,あなたがそれを見ることができるビルドモーションの議論の大部分です.
タイミング関数とは何ですか?なぜそれがそれほど重要なのでしょうか?
タイミング関数は、トランジションの中で動きの感じ方を決める部分で、持続時間よりもはるかに多くの働きをします 同じ長さの2 つのトランジションは、その曲線によって全く違った感じがします A linear トランジションは一定の速度で動き 機械部品のように 機械的に感じられます An ease-out トランジションは到着すると速く始まり、遅くなります。これは、物理的なオブジェクトがどのように減速するかを模倣するため、自然だと感じられます。また、ほとんどのインターフェイス モーションでは適切なデフォルトです。 ease-in 逆のことを行い、画面から離れる場合に最適です。
その下には、これらはすべて立方ベジエ曲線です。 というキーワード ease、 ease-in、 ease-out あんど ease-in-out 特定の名前に対してフレンドリーな名前です cubic-bezier(x1, y1, x2, y2) 2 つの制御点が加速度を形作る値。立方ベジエが強力になるのは、a を持つ制御点です y 1 より上またはゼロより下の値は、アニメーションをエンドポイントを超えて押し戻し、オーバーシュートまたはバウンス (跳ね返り) を構築する方法です。 ジェネレーターには、クリーンなインターフェイス モーションのためのマテリアル標準曲線、および弾力性のある遊び心のある感触のためのオーバーシュートを行うバック曲線に加えて、a が含まれています steps() スプライトやカチカチカウンターをアニメーション化する、滑空ではなく離散フレームでジャンプするモーション用の関数。カーブを選択してトリガーを押すことは、それぞれの動作に対する感覚を構築する最速の方法です。
複数の遷移レイヤーはいつ使用すればよいですか?
1 つの遷移が1 つのプロパティをアニメーション化しますが、実際のインタラクションは一度にいくつか変更されることがよくあります。 ホバー時に持ち上がるボタンは、背景色をシフトし、変換をナッジし、影を深める可能性があり、それらのそれぞれが独自のタイミングを望んでいる可能性があります transition プロパティはこれをカンマ区切りのリストで処理します。各エントリは、独自のプロパティ、継続時間、タイミング関数、遅延を備えた完全な遷移です。
ジェネレータはこれを直接サポートします。プロパティごとにレイヤーを追加し、それぞれを独立して調整し、ツールはそれらを 1 つの短縮形に結合します transition: background-color 200ms ease, transform 200ms ease-out。 を使うのではなく、プロパティに別々の遷移を与える理由 all は 制御 と パフォーマンス. transition: all 便利ですが、意図していないものも含め、変更されるすべてのプロパティをアニメーション化し、変更がないかすべてをブラウザに強制的に監視します 特定のプロパティに名前を付けると、より予測可能で安価になります ツールのスローリビールプリセットは、2 層の遷移を示し、不透明度をフェードさせ、共有遅延とともに変換を移動します これは、表示が簡単になる要素の標準的なレシピです そのペアリングの変換側がチューニングしている場合、 CSS トランスフォームジェネレータ は対となるツールであり、この 2 つはほとんどの場合一緒に使用されます。
スムーズなパフォーマンスを実現するには、どのプロパティをアニメーション化する必要がありますか?
すべてのプロパティがアニメーション化するのに同じように安いというわけではなく、選択は、トランジションがスムーズな60 フレームで1 秒で実行されるか、スタッターで実行されるかに直接影響します。 好む2 つのプロパティは、 transform あんど opacityどちらもページレイアウトを再計算せずにGPUに渡して合成できるため、控えめなハードウェアでもアニメーション化はスムーズであり、このため、カードがスライドして挿入される transform: translateX 同じカードがアニメーション化されている間、バターのように感じます left 荒い感じ.
アニメーションを避けるプロパティは、レイアウトをトリガーするプロパティです: width、 height、 top、 left、 margin あんど padding。 これらのいずれかを変更すると、ブラウザは要素の位置とサイズ、およびそれによって影響を受けるすべてのものを、アニメーションのすべての単一のフレーム上で再計算することを余儀なくされ、これは高価であり、最も一般的な幅をアニメーション化したいと思う場合は、通常、aかどうかを尋ねる価値があります transform: scaleX より安価に同様の効果を生み出すでしょう。ジェネレーターを使用すると、任意のプロパティを選択できるため、ブロックされることはありませんが、リストされるプロパティは配置されます transform あんど opacity それらが最初に到達すべきものであるため、上部に近い このような考慮されたツールのセットを構築するためのより広範なケースは、 Web 開発者ツールキット 作品とその背後にあるワークフローの習慣は次のとおりです 開発者の生産性向上ツール ガイド.
ジェネレータはどのようにプレビューを正直なままにしますか?
すべてのビジュアルビルダーは同じリスクに直面しています: プレビューとエクスポートされたコードは、ツールが再現しない値を教えるまで離れてドリフトします このジェネレーターは、正確に適用されます transition プレビュー要素に出力され、実際の状態変化でトリガーされる値。表示されるモーションは、コピーされた CSS が生成するモーションです。同意できない可能性のある別々のアニメーション パスはありません。
トランジションはプロパティが変更されたときにのみ実行されるため、プレビューは状態を必要とします 切り替えるには、トリガーボタンが行うことです: 要素を2 セットの値の間で反転させるので、トランジションが起動し、それを見ることができます これは、トランジションが野生でどのように機能するかを反映しており、ホバー、フォーカス、または切り替えられたクラスがそれをオフに設定します 出力も最小限のままで、ゼロになったときに遅延をドロップし、追加したレイヤーのみをリストします。 、実行されている意味のある宣言のみを発するという同じ規律です グラディエントジェネレータ そして、 box-shadow generator。
CSS 移行をサポートするブラウザは何ですか?
CSSの遷移は、現在のすべてのブラウザでサポートされており、10 年以上にわたってサポートされています。 ザ transition プロパティとそのすべてのロングハンドはユニバーサルで接頭辞が付けられていないため、このジェネレータの出力はchrome、firefox、safari、edgeで動作し、ベンダープレフィックスやフォールバックはありません。 より新しい transition-behavior: allow-discrete などの個別のプロパティをアニメーション化する機能 display はより最近のもので、サポートが狭いため、その特定のテクニックをプログレッシブな機能強化として扱い、不透明度と可視性のペアリングをフォールバックとして維持します。権威あるルールの場合、W3C の CSS トランジションズ モジュール レベル 1 仕様が主要なソースであり、ジェネレーターによってピースがどのように適合するかを理解できたら読む価値があります。
より幅広いビジュアル CSS ツール、トランスフォーム ジェネレーター、および CSS フィルター ジェネレーター トランジションは、変換をスムーズにし、変換を使用して構築するフィルターであるため、これと自然に組み合わせます。ここにあるものはすべてクライアント側で実行され、コピーした CSS はランタイム、ビルド ステップ、依存関係なしで使用できます。
よくある質問
CSS遷移ジェネレータとは何ですか?
CSS トランジション ジェネレーターは、選択した設定から CSS トランジションを構築するビジュアル ツールです。プロパティ、期間、タイミング関数、遅延を選択し、緩和を監視するためにトリガーできるライブ プレビューを使用してトランジションの速記を出力します。
トランジションをベース状態またはホバー状態のどこに置きますか?
基本状態に置きます。 base ルールで宣言された遷移は、プロパティを両方向にアニメーション化し、ホバー変更に切り替えたり、ホバー変更から戻したりします。 hover でのみ宣言すると、変更はアニメーション化されますが、ポインターが離れると即座にスナップバックされます。
遷移速記の順序は?
順序はプロパティ、duration、timing-function、delay、例えば transition: opacity 300ms ease-in-out 100ms です。 first time value は常に duration、second は常に delay なので、 duration として単一の time value が読み込まれます。
なぜ私の表示: 表示するなし: ブロック遷移はアニメーション化されませんか?
display は animatable プロパティではないからです。 none と block の間に中間値がないため、ブラウザには tween に何もありません。 transition の不透明度と可視性を代わりに一緒に使用するか、新しいブラウザでは transition-behavior: allow-discrete を使用して、display: none からフェードインします。
複数のプロパティを一度に移行できますか?
はい。 transition をカンマで区切ります。たとえば、transition: opacity 300ms ease、transform 200ms ease-out です。このジェネレーターは、レイヤーを追加するときにリストを構築し、各プロパティに独自の継続時間、タイミング関数、遅延を与えます。
立方ベジエタイミング関数とは何ですか?
キュービックベジエタイミング関数は、2 つの制御点からのカスタム加速曲線を定義します。 cubic-bezier (x1、y1、x2、y2) と書かれています。 ease、ease-in、ease-out、ease-in-out というキーワードは特定の曲線のショートカットであり、1 以上 0 以下の制御点はオーバーシュートを作成し、バウンスがどのように構築されるかです。
スムーズなパフォーマンスを実現するには、どのプロパティをアニメーション化する必要がありますか?
変換と不透明度を好む GPU上で合成され、レイアウトをトリガーしないため、60fpsでアニメーション化する 幅、高さ、上部、左またはマージンをアニメーション化すると、ブラウザはフレームごとにレイアウトを再計算する必要があり、これが吃音遷移の最も一般的な原因です。
生成された遷移CSSは無料で安全に使用できますか?
はい。このツールは完全に無料で、サインアップや使用制限はなく、最新のすべてのブラウザでサポートされている標準の接頭辞なしの CSS を送信します。すべての処理はブラウザで行われるため、アップロードされるものは何もなく、ツールはロードされるとオフラインで動作します。
