@starting-style
Sets the styles an element starts from when it first appears, so a `transition` can animate its entrance.
Syntax
@starting-style { selector { … } }Examples
Each new message slides in:
<style>
.toast { padding: 8px 12px; background: palegreen; transition: opacity 0.5s, translate 0.5s; }
@starting-style {
.toast { opacity: 0; translate: 0 20px; }
}
</style>
<button onclick="this.insertAdjacentHTML('afterend', '<p class=toast>Saved!</p>')">Show a message</button>Notes
Without @starting-style a transition does not run for a newly added element or one that switches from display: none. Supported in all current browsers since 2024; elsewhere the element just appears.
See also
- transition — Animates the change of a property from the old value to the new one.
- ::backdrop — The layer right behind a modal `<dialog>` or an element in full-screen mode.
- display — Decides how an element behaves in the flow and how it lays out its content.
- transition-behavior — Allows transitions of discrete properties such as `display` and `overlay`, so an element can fade out before it disappears.
Related recipes
In the tutorial
- Transitions — Smooth style changes with transition — duration, delay, timing functions, what can be animated and where to write the transition.