CSS Animation & Keyframe Generator

Free online CSS animation generator. Convert transitions to @keyframes instantly with visual cubic-bezier editor and live preview.

Back to Animation Generator
Advertisement

CSS Animation Examples

Copy-paste ready CSS animation examples. Use these @keyframes snippets for fade effects, transitions, loading states, and interactive elements.

Fade In Up

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

.element {
  animation: fadeInUp 0.6s ease-out forwards;
}

Bounce In

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.element {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

Slide In Left

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideInLeft 0.5s ease-out forwards;
}

Pulse Glow

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    transform: scale(1.02);
  }
}

.element {
  animation: pulseGlow 2s ease-in-out infinite;
}

Rotate In

@keyframes rotateIn {
  from {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.element {
  animation: rotateIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

Shake

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.element {
  animation: shake 0.5s ease-in-out;
}

Flip In X

@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0);
    opacity: 1;
  }
}

.element {
  animation: flipInX 0.6s ease-out forwards;
  backface-visibility: hidden;
}

Heartbeat

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

.element {
  animation: heartbeat 1.3s ease-in-out infinite;
}
Advertisement

Create Custom Animations

Need a unique animation? Use our generator to convert any CSS transition to custom @keyframes with visual easing control.

Open Animation Generator
Advertisement