CSS Animation Tools
Create keyframe animations, transitions, spinners and easing curves.
Add motion to your interfaces with pure CSS. Build keyframe animations and smooth transitions, design custom cubic-bezier easing curves, grab lightweight loading spinners, and pick hover effects for buttons and links. Preview every animation live, then copy CSS that runs without any JavaScript.
Animations & Transitions
Keyframe motion and state changes, with full control over timing.
Ready-Made Effects
Drop-in loaders and interactions.
How to Use & FAQ
How to Use the Animation Tools
- 1Choose a keyframe animation, a transition, or a ready-made spinner or hover effect.
- 2Set the duration, delay, iterations and easing — or design your own cubic-bezier curve.
- 3Watch the live preview and replay it until the motion feels right.
- 4Copy the CSS and add it to your element.
Frequently Asked Questions
A transition animates between two states when something changes, such as on hover or when a class is added. An animation uses @keyframes to run through any number of steps on its own, and can loop, alternate and start automatically.
cubic-bezier() defines how an animation speeds up and slows down over time. Keywords such as ease-in-out are preset curves; a custom curve lets you create snappier, softer or bouncy motion.
transform and opacity are the smoothest because browsers can animate them without recalculating layout. Animating width, height, top or margin works but can stutter on slower devices.
Wrap or override your animations in a @media (prefers-reduced-motion: reduce) query, and shorten or remove non-essential motion there. This helps people who experience discomfort from on-screen movement.