CSS Animation Generator

Create stunning CSS animations with customizable timing, duration, and effects. Generate keyframes and animation properties with live preview.

Animation Type

Duration (s)

Delay (s)

Iterations

Infinite

Timing Function

Fill Mode

Direction

Complete CSS Code:

@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

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

Use this value for the animation property

fadeIn 1s ease 0s 1 normal none