CSS ENTRY MOTION

@starting-styleで、dialogの出現をなめらかにする

display: none; の要素は、アニメーション前の状態をブラウザが確認できません。@starting-styleで、表示される前の状態をCSS側に用意できます。JavaScriptは必要ありません。

Compare 同じdialogでも、出現時の印象が変わります

CSS motion

Before 急に表示される

After @starting-styleあり

Core CSS

dialog.smooth {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 240ms ease,
    translate 240ms ease,
    display 240ms ease allow-discrete;
}

dialog.smooth:open {
  opacity: 1;
  translate: 0 0;
}

dialog.smooth::backdrop {
  opacity: 0;
  transition: opacity 240ms ease;
}

dialog.smooth:open::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.smooth:open {
    opacity: 0;
    translate: 0 16px;
  }

  dialog.smooth:open::backdrop {
    opacity: 0;
  }
}

Point

`@starting-style` は、表示開始時のスタイルをCSS側で定義できるのが便利です。

@starting-styleで、dialogの出現をなめらかにする

急に出るdialog

ふわっと出るdialog