CSS3でトランジションアニメーションを使う方法

CSS3 には、アニメーションを CSS レベルで実装できるトランジション属性があることがわかっています。これは setInterval() も timer も使用しませんが、基礎となる C++ がレンダリングを行うことで、アニメーションの品質と滑らかさが向上します。レンダリングされたアニメーションは、JS や jQuery よりもはるかに優れています。今日はこのtransition属性の具体的な使い方を見てみましょう。

Web ページのアニメーションを作成する従来の思考モードを覆すために、今日のモバイル ページでは、setInterval() によって完了するアニメーションはまったくなく、すべてトランジションによって実装されます。

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

transition-property は CSS プロパティの名前を指定します。トランジション効果なしの属性は トランジション効果 を取得しません。

すべての属性にトランジション効果が適用されます。

プロパティは、トランジション効果を適用する CSS プロパティ名のリストをカンマで区切って定義します。

transition-duration は、トランジション効果が完了するまでに必要な秒数またはミリ秒数を指定します。

デフォルト値は 0 で、効果がないことを意味します。

transition-timing-function

トランジション効果の速度曲線を指定します

linear トランジション効果は同じ速度で開始および終了します (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 までです。

トランジションエフェクトが開始されるタイミングを定義します。

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

ほとんどすべての CSS 属性をトランジションできます。

JQuery トランジション

background-color

background-position

background-image

どんな変形変形でもトランジション可能

トランジションアニメーションのトリガー条件

CSS への変更がトランジションをトリガーします。例: ホバー、カテゴリの追加と削除、または単純に CSS を直接設定します。

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

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

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

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

transition 属性の使用方法はたくさんあります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3 にはどのような新しい背景属性があるのか​​

CSS3 メディアクエリの使用方法

CSS3 フレックスボックスの作成方法

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