yuheijotaki.com

CSS @starting-style を試してみる

目次

はじめに

CSSのアットルールである @starting-style を試してみた。

@starting-style の概要

トランジションの開始時のスタイルを定義するために使用する。
アットルールなので @media{...} などと同様にルールセットに記述する or 入れ子にできる。

.hoge {
  background-color: red;
  transition: background-color 1s;
}

@starting-style {
  .hoge {
    background-color: transparent;
  }
}

/* or */

.hoge {
  background-color: red;
  transition: background-color 1s;

  @starting-style {
    background-color: transparent;
  }
}

ブラウザ対応状況

Can I use… によると Chrome, Edge, Safari 最新版でサポート済み。

関連としてデモに使用するプロパティ値のサポート状況は次の通り

デモ

所感

  • <dialog> 要素と ::backdrop のアニメーションは allow-discrete と overlay がサポートされているブラウザでのみ動作するため、MacではChromeでのみ動作を確認
  • 今時点の対応状況だと手を出しづらいかと思うが、将来的に <dialog> のアニメーションの記述がシンプルになると思うのでサポート状況を追っていきたい。

参考にした記事や関連資料