ホームページ ウェブフロントエンド CSSチュートリアル CSS3 でのトランジションの使用方法についての深い理解

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

Sep 11, 2018 pm 04:01 PM
css3 transition

現時点では、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) 純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)

CSS ヒント: トランジションを使用してホバー状態を保持する CSS ヒント: トランジションを使用してホバー状態を保持する Sep 27, 2022 pm 02:01 PM

CSS ヒント: トランジションを使用してホバー状態を保持する

CSSを上手に使って色々な変わった形のボタンを実現(コード付き) CSSを上手に使って色々な変わった形のボタンを実現(コード付き) Jul 19, 2022 am 11:28 AM

CSSを上手に使って色々な変わった形のボタンを実現(コード付き)

スペースを取らずにCSS内の要素を非表示にする方法 スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

スペースを取らずにCSS内の要素を非表示にする方法

CSS3でレースボーダーを実装する方法 CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS3でレースボーダーを実装する方法

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。

css3アダプティブレイアウトとは何ですか css3アダプティブレイアウトとは何ですか Jun 02, 2022 pm 12:05 PM

css3アダプティブレイアウトとは何ですか

CSS3でマウスクリックで画像を拡大する方法 CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

CSS3でマウスクリックで画像を拡大する方法

See all articles