Newly available Newly available. Verify your target environments before adopting.

@starting-style

The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e., when an element is first displayed on a previously loaded page.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@starting-style
117
117
129
17.5
117
17.5
DOM API
CSSStartingStyleRule

The CSSStartingStyleRule interface of the CSS Object Model represents a CSS @starting-style at-rule.
117
117
129
17.5
117
17.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.9);
  }
}

Live demo

fade ineffect

@starting-style fade ineffect demo.

PreviewFullscreen

ske-lineffect

@starting-style ske-lineffect demo.

PreviewFullscreen

slide ineffect

@starting-style slide ineffect demo.

PreviewFullscreen

Use cases

  • Using @starting-style

    The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links