# CSS Starting Style (`@starting-style`)

The `@starting-style` at-rule allows you to define the initial styles of an element when it is first rendered or when it transitions from `display: none` to a visible state. This enables entry animations for elements appearing in the DOM, which was previously difficult to achieve with CSS alone.

## 1. The Problem: Animating `display: none`

Traditionally, CSS transitions do not work when an element changes from `display: none` to `display: block`. The browser treats this as an instantaneous change, skipping the transition.

## 2. The Solution: `@starting-style`

With `@starting-style`, you can specify the "before" state of the element just as it is about to be rendered.

**Syntax:**
```css
@starting-style {
  /* Styles to start from */
}
```

## 3. Basic Usage

To animate an element entering the DOM (e.g., a dialog, popover, or a dynamically added element):

```css
.box {
  /* Final state */
  opacity: 1;
  transform: scale(1);
  display: block;
  
  /* Enable transition for display */
  transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
}

/* Initial state (before entry) */
@starting-style {
  .box {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Hidden state (for exit animations) */
.box[hidden] {
  opacity: 0;
  transform: scale(0.5);
  display: none;
}
```

## 4. `transition-behavior: allow-discrete`

To make this work, you must also use the `allow-discrete` keyword in the `transition` property for the `display` property (or `overlay`, `content-visibility`). This tells the browser to flip the value of `display` at the *start* or *end* of the animation, rather than instantly.

```css
transition: display 0.5s allow-discrete;
```

## 5. Use Case: Popovers and Dialogs

This is perfect for the native Popover API or `<dialog>` elements.

[[programming/css/css]]
[[programming/css/transitions-and-animations]]
[[programming/css/css-layers]]