css3移行メモ_html/css_WEB-ITnose
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 つの属性です。次に、コードを数回入力して各値の効果を体験するだけで理解できるようになります。 。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7698
15
1640
14
1393
52
1287
25
1229
29
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
