CSS: @starting-style 新しいクールな at ルール

@starting-style CSS at-rule は、要素が最初のスタイル更新を受け取ったとき、つまり、以前にロードされた要素で最初に要素が表示されたときから移行する要素に設定されているプロパティの開始値を定義するために使用されます。ページ。

トーストメッセージを例に挙げてみましょう。ユーザーに表示するには、その可視性を変更しますが、その結果、すぐに表示されます。これで、新しい @starting-style ルールを使用して、この要素の開始アニメーションを定義できるようになりました。

いくつかの簡単な例

このベースライン HTML、単純な長方形を使用してみましょう:

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

青からピンクへの最初の背景色の遷移を追加します

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

前の例に回転を追加する

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

とにかく、アイデアはわかります。
ポップアップやメニューをアニメーション化するか、アニメーション化されたロゴを作成します。
それは簡単です。

注記

この機能は現在、利用できる機能が限られています。

以上がCSS: @starting-style 新しいクールな at ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。