CSS animation generator (keyframes)

Choose an animation preset, adjust the duration, easing and repetition, preview the result live, then copy the full @keyframes code. 100% local processing — nothing is sent to a server.

Example:

Animation

Duration (s)

Timing curve

Delay (s)

Repetition

CSS code

@keyframes fade-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.mon-element {
  animation: fade-animation 1.2s ease-in-out 0s infinite;
}

How it works

The @keyframes rule describes an element's state at different percentages of an animation's duration, while the animation property attaches this sequence to an element with a duration, an easing curve and a number of repetitions. Choose a ready-made preset (fade, bounce, rotation...), adjust the settings and grab the final code with its @keyframes rule and its animation declaration.

How do I apply this animation to my own element?

Copy the @keyframes rule as-is into your stylesheet, then replace the .mon-element selector with the class or ID of the HTML element you want to animate.

Which timing curve should I choose?

ease-in-out suits most interface animations because it starts and ends smoothly; linear is better suited to a continuous rotation (like a loading indicator), while ease-out gives a crisp arrival effect often used for element appearances.

The code is generated and previewed entirely in your browser, with no connection to a server.