Design a small, usable motion pattern by tuning the keyframes, timing, and easing together. Preview it at the speed your interface needs, then copy the CSS.
Discover a collection of carefully crafted CSS animations across various categories. Copy and use them in your projects with a single click.
Scale Up Center
Scale Up Top
Scale Up Top Right
Scale Up Right
Scale Up Bottom Right
Scale Up Bottom
Scale Up Bottom Left
Scale Up Left
Scale Up Top Left
Scale Up Horizontal Center
Scale Up Horizontal Left
Scale Up Horizontal Right
Scale Up Vertical Center
Scale Up Vertical Top
Scale Up Vertical Bottom
Scale Down Center
Scale Down Top
Scale Down Top Right
Scale Down Right
Scale Down Bottom Right
Scale Down Bottom
Scale Down Bottom Left
Scale Down Left
Scale Down Top Left
Scale Down Horizontal Center
Scale Down Horizontal Left
Scale Down Horizontal Right
Scale Down Vertical Center
Scale Down Vertical Top
Scale Down Vertical Bottom
Rotate Center
Rotate Top
Rotate Top Right
Rotate Right
Rotate Bottom Right
Rotate Bottom
Rotate Bottom Left
Rotate Left
Rotate Top Left
Rotate Horizontal Center
Decide what the motion should communicate before choosing a duration or easing curve.
The static state should still communicate the interface when motion is reduced, interrupted, or unsupported.
Treat the generated keyframes as a starting point and test them with the actual layout, content, and interaction state.
It depends on the task and distance, but the motion should be short enough to preserve the user’s flow and slow enough to remain legible.
No. Animate a change that benefits from feedback or continuity. Static content is often clearer and faster.