CSS Animation Timeline

Build @keyframes animations stop by stop — set transform and opacity at each offset, then tune duration, timing, iteration, and direction.

Keyframes

Keyframe at 0%

Offset0%

Translate X0px

Translate Y0px

Scale1

Rotate0deg

Opacity1

Animation

Duration2s

Timing

Iterations

0 = infinite

Direction

Live Preview

Generated CSS

@keyframes anim-Ril5fiv5ur5tllb {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animated-element {
  animation: anim-Ril5fiv5ur5tllb 2s ease-in-out infinite alternate;
}