@s
@starting-style Playground
CSS 2024
Dev Vault
Presets
M
Modal Fade-In
Animate dialog from hidden
T
Toast Slide-In
Notification from bottom-right
P
Popover Scale
Scale up from anchor point
C
Staggered Cards
Cards appear one by one
A
Accordion Expand
Smooth content reveal
N
Nav Highlight
Active state entry animation
Properties
Duration
300ms
Easing
ease
ease-in
ease-out
ease-in-out
linear
spring (overshoot)
smooth-out
Start Opacity
0
Start Scale
0.95
Start Y offset
20px
Browser Support
Chrome 117+
Edge 117+
Opera 103+
Safari 17.5+
Firefox 129+
Live Preview
Trigger Animation
Reset
@starting-style defines the initial styles for entry animations from
display: none
Generated CSS
Copy