CSS Reference

@start-style

トランジションさせる要素の変更前スタイルを定義する

@start-style 規則は、CSS トランジションさせる要素に設定されるプロパティ群の変更前スタイルを定義するために使用されます。

CSS トランジションは、通常「スタイルが変更されたとき」に開始されます。この時、要素には「変更前スタイル（before-change style）」が必要です。

この「変更前スタイル」は、前回のスタイル変更時に設定されている必要がありますが、例えば、（display: none; などによって）要素が画面に表示されていなかった場合、その要素には前回のスタイル変更イベントで「変更前スタイル」が存在しないため、通常は CSS トランジションが開始できません（動作が発火、トリガーされません）。

しかし、新しく DOM に追加された要素や、display: none; から別の値に変更されることによって表示されるようになった要素に対しても CSS トランジションを開始したいケースは多いと思います。このようなニーズに @start-style 規則は対応します。

@start-style 規則によって「変更前スタイル」を定義することにより、CSS トランジションを動作させることが可能になります。

詳細説明

@start-style 規則の具体的な記述例は下記のようになります。

h1 {
  transition: background-color 1.5s;
  background-color: green;
}

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

上の例では、h1 要素に対して、transition: background-color 1.5s; と background-color: green; が指定されており、さらに @start-style 規則を使用して、変更前スタイル、background-color: transparent; が定義されています。これによって、背景色が透明（transparent）な状態から、緑（green）にトランジションします。

また、上記の記述は、入れ子にして下記のようにも記述できます。

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

ただし、@start-style 規則の内容が使用されるのは、初めて描写されるときのみです。上記の例でいえば、ページが読み込まれ、h1 要素が初めて画面に描写された時、もしくはこの要素が初期段階で display: none; されていた場合、この値が変更されて、h1 要素が画面上に描写された時になります。

一度描写された要素に対して再度 CSS トランジションを発生させる場合、@start-style 規則の内容は適用されません。

@start-styleのサンプルソース

#target {
  transition-property: opacity, display;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}
#target.hidden {
  display: none;
  opacity: 0;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome