Transitions.dev — Essential transitions for web apps

transitions.dev · 949 words · saved by 4 readers

Collection of the most essential transitions for web apps that you can just copy and paste into any project.

blocks below. ──────────────────────────────────────────────────────────── */ .card[data-proto-card][data-wip="true"] { display: none !important; } /* Desktop reuses the P7 "Modal open / close" prototype transition: open → scale(--p7-scale) → scale(1) over --p7-open-dur close → scale(1) → scale(--p7-scale-close) over --p7-close-dur Mobile (≤639px) re-skins the dialog as a bottom-anchored sheet with panel-reveal style fade + cross-blur and explicit Y travel: open → translateY(300px) -> rest close → rest -> translateY(200px) See the @media block below. */ .proto-modal-root { position: fixed; ins

Transitions.dev — Essential transitions for web apps

saved by

related reading