Newly availableNewly available. Verify your target environments before adopting.
Syntax and cascade Newly available

@starting-style

The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.

Syntax and cascade

Overview

The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.

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 sets the starting values for properties that are transitioning when the target element's style is first updated.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features