Motion

@starting-style

Newly availablesince Aug 2024

Replaces: A requestAnimationFrame trick to animate something in from display: none. The entry state is declared, and the transition just runs.

See it working

Show the toast

Saved. I faded in from display: none.

The syntax

.toast { transition: opacity .3s, translate .3s, display .3s allow-discrete; }
.toast[hidden] { display: none; }

@starting-style { .toast { opacity: 0; translate: 0 8px; } }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

For browsers without it

Without it the toast appears instantly instead of fading in. That is the fallback, and it is fine: the entry animation is polish, the message is the content.

Before you ship it

Transitions only, never animations

@starting-style gives a transition somewhere to start from when an element first appears. It does nothing for a keyframe animation, which already declares its own first frame. Source

It has the same specificity as the ordinary rule

The block does not win by being a starting style. If the normal rule and the starting rule have equal specificity, source order decides, so put @starting-style after the rule it starts from. Source