Alternate direction creates a natural back-and-forth effect — ideal for attention-grabbing UI elements?

Alternate direction creates a natural back-and-forth effect — ideal for attention-grabbing UI elements.

Custom cubic-bezier curves let you create unique easing that matches your brand feel?

Custom cubic-bezier curves let you create unique easing that matches your brand feel.

Keep animation duration under 300ms for micro-interactions and 500-1000ms for transitions.

Build CSS keyframe animations with live preview, timing controls, and ready-to-use code

Build CSS keyframe animations with live preview, timing controls, and ready-to-use code — all in your browser.

1Select an animation type: Bounce, Fade In/Out, Slide In/Out, Shake, Rotate, or Pulse.
2Adjust the duration and delay to control the animation speed and start time.
3Set the iteration count (number of loops) or choose Infinite for continuous animations.
4Pick the direction (Normal, Reverse, Alternate) and timing function (ease, linear, cubic-bezier).
5Click 'Replay' to preview the animation, then copy the CSS output.

Alternate direction creates a natural back-and-forth effect — ideal for attention-grabbing UI elements.
Custom cubic-bezier curves let you create unique easing that matches your brand feel.
Keep animation duration under 300ms for micro-interactions and 500-1000ms for transitions.

Free: basic animations. Starter+: premium animation types.

OneKitTools TeamUpdated 2.21.4