CSS Animation Generator

Visually create CSS animations with keyframe editing, preset library, live preview, and code output.

Preset Animations

Animation Parameters

Animation Name

Duration1s

Easing Function

Delay

Iteration Count

Direction

Fill Mode

Keyframes

X Offset

Y Offset

Scale

Rotate

Opacity

Skew

X Offset

Y Offset

Scale

Rotate

Opacity

Skew

X Offset

Y Offset

Scale

Rotate

Opacity

Skew

Live Preview

CSS Code

@keyframes customAnimation {
  0% {
  }
  50% {
    transform: translateX(50px) translateY(-20px) scale(1.1) rotate(5deg);
    opacity: 0.8;
  }
  100% {
  }
}

.animated {
  animation: customAnimation [object Object]s ease [object Object]s infinite normal none;
}