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

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; } }
The demo’s full CSS 
.dm-ss { min-height: 110px; }
.dm-ss label { font-size: 13.5px; font-weight: 700; display: inline-flex; gap: 7px; align-items: center; }
.dm-ss-toast { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #0a0a0f; color: #fff; font-size: 13.5px;
  opacity: 1; translate: 0 0; transition: opacity .35s, translate .35s, display .35s allow-discrete; }
.dm-ss:has(input:checked) .dm-ss-toast { display: block;
  @starting-style { opacity: 0; translate: 0 10px; } }

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.