@starting-style: animate from initial

A 2024 feature for "enter" animations on dynamically-added elements

When you add an element to the DOM, transitions don't fire — the element is already in its final state. Workarounds were hacky (force a reflow, JS double-RAF).

The new way:

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

.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

@starting-style defines the INITIAL state. The actual selector defines the FINAL state. When the element is added (or becomes display: none → visible), the transition runs from initial to final.

Common uses

• Toast notifications appearing.
• Popovers / dialogs opening (animate the popover, not the backdrop).
• Items being added to a list.

Pair with transition

@starting-style alone does nothing — you need transition or animation on the element to interpolate between starting and final.

Browser support

Chrome / Edge / Safari shipped 2023-24. Firefox is behind. For wide support, also include the older "force-reflow" fallback or use animation: appear instead.