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