Animation Timing Generator

CSS animation timing controls exactly how an element moves through its keyframe states over time. The animation shorthand property lets you define every aspect of a web animation in a single line, specifying six core parameters: duration, timing function, delay, iteration count, direction, and fill mode. Getting these parameters right is the difference between a polished, professional interface and a janky, distracting one.

The animation timing generator assembles all six parameters into a ready-to-paste CSS rule. Instead of memorising the exact property order or hunting through documentation, you adjust sliders and dropdowns and the generator outputs syntactically correct CSS instantly. You can also preview the animation live before copying the code into your project.

Understanding timing is especially important for user experience. Research in motion design consistently shows that animations faster than 200 ms feel snappy and responsive, while animations between 300 ms and 500 ms convey smoothness without impatience. Animations above 1 second are best reserved for decorative, attention-grabbing effects rather than functional UI feedback. The delay parameter gives you fine control over when an animation starts relative to when its element appears in the DOM, enabling staggered entrances for lists, dashboards, and hero sections.

By combining timing functions such as ease-in-out with alternate direction and a fill mode of both, you can create looping effects that hold their start and end state — perfect for loading indicators, pulsing badges, and infinite carousels — all without a single line of JavaScript.

The timing function (also called an easing function) is the most nuanced parameter in the animation shorthand. It defines the rate of change of the animation over time — not just how fast it goes, but how it accelerates and decelerates. CSS provides five named keywords and an unlimited range of custom cubic Bézier curves.

When none of the five keywords gives you the exact feel you want, switch to Custom Bezier mode and dial in the four control-point values (x1, y1, x2, y2). The x values must stay between 0 and 1, but the y values can go below 0 or above 1 to create overshoot — the characteristic "bouncy" effect seen in the Bounce preset (cubic-bezier(0.68, -0.55, 0.265, 1.55)).

Three parameters work together to define the lifecycle of repeated animations: direction, fill-mode, and iteration count.

Direction controls which way each cycle plays:

• normal — every cycle plays forward (0% → 100%)
• reverse — every cycle plays backward (100% → 0%)
• alternate — odd cycles play forward, even cycles play backward; this gives a natural back-and-forth without a hard jump
• alternate-reverse — starts backward, then alternates

Fill mode answers "what happens before the animation starts and after it ends?"

• none — the element returns to its original styles before and after the animation
• forwards — the element retains the final keyframe styles after the animation ends; useful for slide-in effects where you want the element to stay in its final position
• backwards — the element immediately applies the first keyframe styles during the delay period
• both — combines forwards and backwards; the most comprehensive option for most entrance animations

Iteration count specifies how many times the animation cycles. Setting it to 0 in this generator maps to the CSS keyword infinite, which makes the animation loop forever — essential for loading spinners, pulsing indicators, and ambient background effects. Values greater than 1 allow precise repeated plays, such as 3 shakes for an invalid form field.

The animation timing generator is designed for a fast, visual workflow. Here is the typical process for creating a polished CSS animation from scratch:

1. Start with a preset. The Fade In, Bounce, Slide, and Pulse presets cover the most common animation patterns. Click one to instantly load its duration, timing function, and direction. Use it as a starting point rather than building from zero.
2. Adjust the Duration slider. Drag left for snappier UI feedback (0.1–0.3 s), or right for dramatic entrance animations (0.8–2 s). The live preview updates in real time.
3. Set a Delay if the animation should pause before starting — for example, 0.2 s so the element renders before moving, or staggered delays on multiple elements.
4. Choose your Timing Function. For most UI elements ease-out looks natural on entry; ease-in-out works well for looping effects. Switch to Custom Bezier if you want overshoot or a spring-like feel.
5. Set Direction and Fill Mode. For a one-shot entrance, use normal direction with forwards fill mode so the element stays at its destination. For a loop, use alternate with infinite iterations.
6. Click Play Animation to see a real preview in the browser, then click Copy next to the Animation Property output to paste it directly into your stylesheet.

The generator also outputs a complete @keyframes example block you can customise. Replace translateX and opacity with any CSS properties relevant to your design — scale, rotate, background-color, or complex filter effects.

Smooth animations depend on the browser's rendering pipeline. CSS properties that trigger only the compositor layer — primarily transform and opacity — are the most performant because the browser can handle them on the GPU without recalculating layout or paint. Avoid animating width, height, top, left, or margin in performance-critical contexts, as these trigger expensive layout reflows on every frame.

Adding will-change: transform, opacity to an element before its animation starts can hint to the browser to promote it to its own compositor layer ahead of time, reducing first-frame jitter. Remove the property once the animation completes to free GPU memory.

Accessibility is equally important. The prefers-reduced-motion media query allows users who experience motion sickness or vestibular disorders to opt out of animations at the OS level. Always wrap non-essential animations in a check:

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

For animations that convey state changes (loading complete, error, success), provide an equivalent non-animated indicator — an icon, colour change, or ARIA live region — so screen-reader users and reduced-motion users receive the same information. Good animation design enhances the experience for everyone without excluding anyone.