CSS & Design

Animation / Keyframes Generator

Create CSS @keyframes animations visually — tune stops, transforms, timing — play preview & copy code.

NameDuration

TimingFrom (CSS)To (CSS)

@keyframes fadeIn {
  from {
    opacity: 0; transform: translateY(10px);
  }
  to {
    opacity: 1; transform: translateY(0);
  }
}

.fadeIn {
  animation: fadeIn 1s ease;
}