What are CSS keyframes?

Keyframes define the steps of an animation using the @keyframes at-rule, listing how properties change at points from 0 to 100 percent. The animation property then attaches those keyframes to an element along with timing, delay, and iteration settings.

Which effects can I generate?

Fade, slide, bounce, spin, pulse, and shake. Slide supports a direction, while bounce and shake expose a distance or amplitude so you can control how far the element moves.

Does this need any JavaScript?

No. The generated code is pure CSS — an @keyframes block plus a class. The live preview on this page uses a remount to replay the animation, but the exported CSS runs on its own with no scripting.

How do I apply the animation to my element?

Paste the generated CSS into your stylesheet and add the class gera-animated to the element you want to animate. The animation runs automatically when the element renders because animation-fill-mode is set to both.

Can I loop the animation forever?

Yes. Set the iteration count to infinite and the animation repeats continuously. This works well for pulse and spin loaders; for entrance effects like fade and slide, keep the count at 1.

CSS Animation Generator

This generator produces ready-to-use CSS keyframe animations for the most common UI effects. Tune the timing, preview it live, and copy clean CSS you can drop straight into any project — no animation library or JavaScript needed.

How it works

A CSS animation has two parts: a @keyframes block that describes the steps, and an animation declaration that attaches it to an element. This tool builds both.

For each effect it writes the appropriate keyframe steps. A fade animates opacity from 0 to 1; a slide combines opacity with a translateX or translateY offset that returns to 0; bounce and shake use multi-stop transform steps; spin rotates a full 360°; and pulse scales between 1 and 1.08. It then emits an animation-* set using your duration, delay, timing function, and iteration count, with animation-fill-mode: both so the element holds its start and end states.

The exported class is gera-animated, for example:

.gera-animated {
  animation-name: gera-fade;
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

Tips and notes

For entrance effects (fade, slide) keep the iteration count at 1 and use an ease-out timing function so motion settles naturally. For loaders use spin or pulse with infinite and linear. The cubic-bezier overshoot option adds a springy feel to slide and bounce. Respect users who prefer reduced motion by wrapping the class in a @media (prefers-reduced-motion: no-preference) query in your own stylesheet.