CSS Animation Generator

Build CSS keyframe animations with presets and live preview. Customize duration, timing, iterations, and more.

Processed on your device — never uploaded
Element
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation: fadeIn 1s ease 0s 1 normal forwards;
}

Frequently Asked Questions

What is a CSS keyframe animation?
A CSS keyframe animation uses @keyframes rules to define intermediate steps in an animation sequence, allowing you to control how an element transitions between styles over time.
What does animation-fill-mode do?
animation-fill-mode determines which styles are applied before and after the animation. "forwards" retains the final keyframe styles, while "backwards" applies the first keyframe styles during the delay period.
How do I make a CSS animation loop infinitely?
Set animation-iteration-count to "infinite" to make the animation repeat continuously without stopping.
What is the difference between ease and linear timing functions?
"ease" starts slow, speeds up, then slows down for a natural feel, while "linear" maintains a constant speed throughout the entire animation.