CSS3 Transition
CSS3 トランジションを使用すると、CSS プロパティ値を一定の時間間隔内でスムーズに遷移させることができます。この効果は、マウスのクリック、フォーカス、クリック、または要素への変更によってトリガーされ、CSS プロパティ値をスムーズにアニメーション化します。
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
transition-property: トランジションの CSS プロパティを指定します。
transition-duration: 移行が完了するまでに必要な時間を指定します。
transition-timing-function: 遷移速度調整関数を指定します。
transition-lay: トランジションが開始されるまでの遅延時間を指定します。
transition 属性は、border 属性や font 属性と似ており、省略したり、別々に記述したりできます。省略する場合、各機能はスペースで区切られ、特定の順序で配置する必要があります。さらに、複数のトランジション属性を操作する場合は、それらをカンマで区切ります。以下の通り:
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:50px; height:100px; background:#ffd800; /*分开使用transition的扩展属性*/ transition-property:width,height,background; transition-duration:1s; transition-timing-function:ease; transition-delay:.2s; /*使用transition简写属性*/ transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s; } div:hover{ width:100px; height:50px; background:#00ff90; }</style></head><body> <div></div></body></html> transition-property 構文:
transition-property:no | all | <single-transition-property> [, <single-transition-property>] *
none: スタイルは指定されていません。
All: デフォルト値。transition-property 属性をサポートする、指定された要素のすべてのスタイルを示します。
すべてのスタイルがトランジションのトランジション プロパティを適用できるわけではありません。色、長さ、グラデーションなどのトランジション効果を適用できるのは、中間値を持つスタイルのみです。
transition-duration syntax
transition-duration:<time> [,<time>] *
transition-timing-function syntax
transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *
Single transition function
ease: デフォルト値、要素スタイルが初期状態から終了状態に遷移するとき、速度は速いから遅いまで徐々に遅くなります。
Linear: 要素スタイルは初期状態から最終状態まで一定の速度で遷移します。
ease-in: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん速くなり、加速された状態を示します。この効果をフェード効果と呼びます。
ease-out: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん遅くなり、減速状態を示します。この効果をフェード効果と呼びます。
ease-in-out: 要素スタイルが初期状態から終了状態に変化するとき、最初に加速し、次に減速します。この効果をフェードイン効果と呼びます。
Cubic Bezier Curve: より正確な遷移関数を定義するために使用されます。
3 次ベジェ曲線を定義するための構文は次のとおりです:
cubic-bezier(p0,p1,p2,p3)
各ポイント値には 0% から 100% に相当する 0 から 1 の値のみが許可されます。p0 と p3 の値は次のとおりです。これらは常に始点座標 (0 ,0) と終点座標 (1,1) を表します。したがって、p1とp2のポイント値を設定するだけで済みます。
は、オンラインの 3 次ベジェ ツールを使用してシミュレーションおよび実装できます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:50px; height:100px; background:#ffd800; transition-property:width,height,background; transition-duration:1s; /*定义了三次贝塞尔曲线函数，p1的坐标是(.57,.07),p2的坐标是(.69,.16)*/ transition-timing-function:cubic-bezier(.57,.07,.69,.16); transition-delay:.2s; } div:hover{ width:100px; height:50px; background:#00ff90; }</style></head><body> <div></div></body></html>steps()関数:操作フィールド全体を同じサイズの間隔に分割するために使用され、各間隔は等しいです。
steps(<integer> [, [start | end]]?)
最初のパラメータは数値で、主にsteps()関数の間隔数を指定するために使用されます。この値は0より大きい正の整数でなければなりません。
2番目のパラメータはオプションで、デフォルト値はendです。
Transition-timing-function:steps (3, start);
アニメーションのステップ効果は各ステップの先頭からジャンプするので、ステップは3/1になります。 3/2、3/3 。
Transition-timing-function:steps (3, end);
アニメーションのステップ効果は各ステップの最後からジャンプするので、ステップは0、3ということになります。 /1、3/2。
transition-lay 構文
transition-delay:<time> [, <time>] *
Transition-lay: アニメーションの実行開始時間、つまり、要素の属性値を変更してからトランジション効果の実行を開始するまでにかかる時間を指定するために使用されます。正の値にすることもできます。整数、負の整数、および 0。ゼロ以外の場合、単位は s (秒) または ms (ミリ秒) に設定する必要があります。
正の整数の場合は、わかりやすい、つまり、遷移の開始が数秒遅れます。負の整数の場合、要素の前回の時間、つまり、に使用された値が切り捨てられます。遷移時間から遷移遅延の遅延値を差し引いた値の間の値は発生せず、遷移の残りの値に直接ジャンプします。
CSS3 トランジションの基本的な知識はすでに習得しています。簡単に言うと、それは 4 つの値を持つ 1 つの属性です。次に、コードを数回入力して各値の効果を体験するだけで理解できるようになります。 。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PMWebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...
React static Page構成：React-AppReviredを使用したコード圧縮を避ける方法は？Apr 05, 2025 pm 01:18 PMReact-App-Recrowiredを使用して静的ページを構築するときにコード圧縮を回避する方法について多くの開発者が配信したい...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 中国語版
中国語版、とても使いやすい
ホットトピック
7449
15137452