Toolypet
CSS UTILITY

CSS Animation Builder

Build CSS keyframe animations with visual controls for duration, timing, delay, iteration, and direction. Preview and copy production-ready code.

1.0s
0.0s
Generated CSS
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.element {
  animation: bounce 1.0s ease 0.0s infinite normal none;
}

Bringing Interfaces to Life

Animations vs. Transitions

CSS transitions animate between exactly two statesand require a trigger — a hover, focus, or class change. CSS animations use @keyframes to define an arbitrary number of intermediate states and can auto-play on load, loop infinitely, and reverse direction. A transition is what you use for a button hover effect (0.2s color change). An animation is what you use for a skeleton loader that pulses continuously, a notification bell that shakes on arrival, or a step-by-step onboarding sequence with 5 distinct phases.

The Animation Shorthand

animation: name duration timing delay count direction fill play

Eight sub-properties in one line. duration (e.g. 0.3s) sets total time. timing-function (ease, linear, cubic-bezier) controls acceleration. iteration-countcan be a number or “infinite”. direction accepts normal, reverse, alternate, or alternate-reverse. fill-mode(forwards, backwards, both) determines the element's style before/after the animation — without forwards, the element snaps back to its original state when the animation ends.

The Performance Golden Rule

Only two CSS properties are guaranteed to be compositor-only (GPU thread, no main-thread involvement): transform and opacity. Animating anything else — width, height, padding, color, box-shadow — triggers layout recalculation or repaint on every frame. At 60fps, that is 16.6ms per frame. A layout change on a complex page can easily take 20-40ms, causing visible jank. The professional pattern: animate only transform/opacity, and use will-change: transform to promote the element to its own compositing layer before the animation starts.

Accessibility & Reduced Motion

Approximately 35% of adults experience motion sensitivity. The prefers-reduced-motion media query lets you respect their preference. Best practice: write your full animation first, then add a @media (prefers-reduced-motion: reduce)block that either removes the animation entirely or replaces it with a subtle fade. Never use animation as the only indicator of state change — always pair it with a visual cue like color or icon change that persists after the animation ends.

Frequently Asked Questions

How do I chain multiple animations on the same element?

Comma-separate them: animation: fadeIn 0.3s ease forwards, slideUp 0.5s ease 0.1s forwards. Each animation runs independently with its own duration, delay, and timing. Use the delay parameter to sequence them. For true sequential chaining where animation B starts exactly when A ends, use JavaScript's animationend event or the newer Web Animations API.

What is animation-fill-mode and why does my element “jump back” after animating?

By default, an element returns to its pre-animation state when the animation completes. Setting animation-fill-mode: forwards keeps the element in the final keyframe state. Use backwards to apply the first keyframe state during the delay period, and both to combine both behaviors. This is the most common CSS animation gotcha.

Can I pause and resume a CSS animation?

Yes. Toggle animation-play-statebetween “running” and “paused”. A common pattern: pause on hover for carousels or marquees with .element:hover { animation-play-state: paused }. The animation freezes at its current position and resumes from exactly that point when unpaused — no restart, no jump.