CSS3のTransitionプロパティの詳細説明とexamples_CSS/HTMLの共有
1.transition-property の構文
[css]
transition-property: all (すべての属性が変更されます) || [attr] (移動するスタイルを指定します)| | なし (属性変更なし)
2.transition-propertyの属性値
(1)none:トランジションの実行を即時に停止します
(2)all:要素のいずれかの属性値が変化したときにトランジション効果を実行します
(3)attr : 移動するスタイルを指定
1. Transition プロパティ — 移動するスタイルを指定します
1.transition-propertyの構文
[css]
transition-property: all (すべての属性が変更される) || [attr] (移動するスタイルを指定する) || none (属性は変更されない) )
2.transition-propertyの属性値
(1)none:トランジションの実行を即時に停止します
(2)all:要素のいずれかの属性値が変化したときにトランジション効果を実行します
(3)attr : 移動するスタイルを指定
2. 遷移期間
遷移期間は、指定された要素の変換プロセスの期間 (秒) です。 transition-duration は、:before と :after
疑似要素。デフォルト値は 0 で、変換が即時に行われることを意味します。
3. 遷移遅延 - 遅延時間
遷移遅延は、アニメーションの実行を開始する時間、つまり、アニメーションを変更してから実行を開始するまでにかかる時間を指定するために使用されます。要素の属性値。トランジション効果、単位は s (秒)
の使用法は、transition-duration と非常に似ており、:before および :after 疑似要素を含むすべての要素に適用することもできます。デフォルトのサイズは「0」です。これは、変換がすぐに実行されることを意味します。
遅延はありません。
IV. 遷移タイミング関数 - モーションの形式を指定します
遷移タイミング関数: イーズ (徐々に遅くなります) | リニア (一定速度) | イーズイン (加速します) ) |ease-out (減速) |ease-in-out (最初に加速してから減少します
速度) | cubic-bezier (この値により時間曲線をカスタマイズできます) (number,number,number,number>)
5. トランジションの包括的な記述方法
[css]
要素セレクター {トランジション: モーション スタイル、デュレーション、モーション フォーム、遅延時間;}
6. 包括的で互換性のある移行の記述方法
1. Mozilla カーネル
[css]
要素セレクター {-moz-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}
2. Webkit カーネル
[css]
要素セレクター {-webkit-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}
3. Opera カーネル
[css]
要素セレクター {-o-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}
4. W3C 標準
[css]
要素セレクター {トランジション: モーション スタイル、持続時間、モーション フォーム、遅延時間;}
効果の例:
a{transition:all .6s easy-in-out;-webkit-transition:all .6s easy-in-out;-moz-transition:all 。 6s easy-in-out;-o-transition:all .6s easy-in-out;-ms-transition:all .6s easy-in-out;}

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

ホバー状態を保存するにはどうすればよいですか?以下の記事ではJavaScriptを使わずにホバー状態を保持する方法を紹介していますので、ご参考になれば幸いです。

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

「レスポンシブ レイアウト」とも呼ばれるアダプティブ レイアウトとは、画面の幅を自動的に認識し、それに応じて調整できる Web ページ レイアウトを指します。このような Web ページは、端末ごとに特定のバージョンを作成するのではなく、複数の異なる端末と互換性を持たせることができます。 。アダプティブ レイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。

実装方法: 1. ":active" セレクターを使用して、画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。
