CSS @starting-style 规則

定義と使用方法

CSS @starting-style ルールは、要素が最初のスタイル更新を受ける前に要素の初期スタイルを定義するために使用されます。

これは、ポップアップやモーダルダイアログや、display: none状態から見える状態になる要素に対して、滑らかなエントリーやアウトトレイジション効果を作成するために使用できます。

例

例1

使用 @starting-styleボックスを透明度0から始め、上から落ちてくるようにします：

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  

自分で試してみてください

例2

ポップアップやダイアログボックスで使用 @starting-style

#myPopover {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  

#myDialog {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  

自分で試してみてください

CSS文法

@starting-style {
  CSS宣言

ブラウザのサポート

テーブルの数字は、@ルールを完全にサポートする最初のブラウザのバージョンを示しています。