Micro Tools
Advertisement

Keyframe animator

Build CSS keyframe animations: bounce, spin, pulse, shake, fade and slide. Set duration and iteration, preview live, then copy the @keyframes code.

Animation settings

Pick an effect, tune it, preview it live.

Preview and CSS
A
Advertisement

How keyframes describe motion

A @keyframes rule lists snapshots of an element at percentages of the animation timeline. The browser interpolates between them: 0% and 100% define the endpoints, and intermediate stops like 50% shape the motion path.

Iteration and fill modes

infinite loops forever for loaders and ambient effects, while a count like 2 plays a fixed number of times for feedback like a shake on invalid input. One-shot entrance animations usually pair with animation-fill-mode: both so the element holds its end state.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Keyframe Animator FAQs

Which animation fits a form validation error?
Shake, played once over 0.4 to 0.5 seconds. The quick lateral motion reads as no without needing any text, and stopping after one play keeps it from feeling aggressive.
How do I chain two animations on one element?
Comma-separate them in the animation shorthand: animation: kf-fade 0.5s both, kf-slide 0.5s both. They run simultaneously, which is how you build polished entrances.
Why is my infinite animation janky on mobile?
Animate transform and opacity only. Animating width, height, margin or top forces layout recalculation every frame. All eight effects here stick to transform and opacity for that reason.
Can I pause the animation on hover?
Yes: .animated:hover { animation-play-state: paused; }. It is a nice touch for marquees and ambient loops, letting users freeze motion to read content.
What does ease-in-out do in the shorthand?
It smooths both ends of each iteration so the motion accelerates out of each keyframe and decelerates into the next. For spins and pulses it removes the visible snap when the loop restarts.
Advertisement