← Back to at-rules

CSS At-rule

@starting-style

Animation

Defines the initial styles of an element before its first style transition, enabling entry animations without JavaScript.

Syntax

@starting-style { selector { property: value; } }

Example

@starting-style { .dialog { opacity: 0; transform: translateY(8px); } }

Common use cases

  • Entry animations for dialogs and popovers
  • Fade-in on page load without JavaScript
  • Animating elements inserted into the DOM

Practical developer insight

@starting-style is a modern CSS feature that lets you animate elements from their initial state on first render — previously only possible with JavaScript.

Related

transition@keyframes