ホームページ > 記事 > ウェブフロントエンド > CSS3 の新しい遷移属性の紹介 (例付き)
この記事では、CSS3 の新しいトランジション属性について説明します (例付き)。必要な方は参考にしていただければ幸いです。
CSS3 に新しいモジュール トランジションが追加されました。これは、いくつかの単純な CSS イベントを通じて要素の外観の変更をトリガーし、効果をより繊細にすることができます。
主に以下のサブ属性を含む複合属性です。
transition-property: トランジションまたは動的シミュレーションの CSS プロパティを指定します
transition-duration: トランジションが完了するまでに必要な時間を指定します
transition-timing-function: トランジション関数を指定します
transition-delay: 開始までの遅延時間を指定します出現
例:
transition: background-color .5s ease .1s;
特記事項: "transition-property" 属性が all に設定されている場合、それはすべての中間値のプロパティを表します。
例:
width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s;
個別のプロパティを設定することも可能です。
関連する推奨事項:
CSS3 トランジション属性_html/css_WEB-ITnose
CSS3_CSS/HTML のトランジション属性の詳細な説明と例の共有
以上がCSS3 の新しい遷移属性の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。