CSS3 でのトランジションの使用方法についての深い理解

現時点では、setInterval() やタイマーを使用する代わりに、基盤となる C++ を使用してアニメーションを実装できます。レンダリングされたアニメーションの品質と滑らかさは、JS や jQuery よりもはるかに優れています。

Web ページのアニメーションを作成する従来の思考モードを覆すために、今日のモバイル ページでは、setInterval() によって完了するアニメーションはまったくなく、すべてトランジションによって実装されます。今後2～3年もすればPC側もそうなり、setInterval()やanimate関数は移行の中で廃止されるでしょう。

構文: 遷移: プロパティの期間のタイミング関数の遅延時間の単位: 秒 (秒)。

transition-propertyはCSSプロパティ名を指定し、属性が無い場合はトランジション効果が得られます。 all すべてのプロパティがトランジション効果を受けます。 property は、トランジション効果を適用する CSS プロパティ名のカンマ区切りのリストを定義します。 transition-duration トランジション効果が完了するまでに必要な秒数またはミリ秒数を指定します。 トランジション効果が完了するまでにかかる時間 (秒またはミリ秒) を指定します。デフォルト値は 0 で、効果はありません。

transition-timing-function は、同じ速度で開始および終了するトランジション エフェクト

線形トランジション エフェクトの速度曲線を指定します (cubic-bezier(0,0,1,1) に等しい)。
ease トランジション効果はゆっくりと始まり、その後速くなり、ゆっくりと終了します (cubic-bezier(0.25,0.1,0.25,1))。
低速で開始するイーズイン トランジション エフェクト (cubic-bezier(0.42,0,1,1) と同等)。
ゆっくりとした速度で終了するイーズアウト トランジション エフェクト (cubic-bezier(0,0,0.58,1) と同等)。
ゆっくりとした速度で開始および終了するイーズインアウト トランジション エフェクト (cubic-bezier(0.42,0,0.58,1) と同等)。
cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は 0 ～ 1 です。
transition-lay は、トランジション効果が開始されるタイミングを定義します。

トランジションに参加できる属性は何ですか?

ほぼすべての CSS プロパティを移行できます。
JQuery トランジション
background-color
background-position
background-image
どんな変形変形もトランジション可能

トランジションアニメーションのトリガー条件は何ですか?

CSS を変更すると、遷移がトリガーされます。例: ホバー、加算と減算、または単純に CSS を直接設定します。
例:
CSS を直接設定すると遷移アニメーションがトリガーされます:

document.getElementById("box").style.width = "300px";

クラス名を変更すると遷移アニメーションがトリガーされます:

document.getElementById("box").className = "long";

特記事項: 遷移は継承できません。

以上がCSS3 でのトランジションの使用方法についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。