🍱 Lunchbox Hands

CSS Keyframe Animation Generator

Build @keyframes animations visually from 20 tweakable presets

Build CSS @keyframes animations visually — start from 20 ready-made presets like bounce, tada, and fade-in-up, then tweak every stop's position, opacity, and transform. Copy standalone CSS. Everything runs in your browser.

s
s
Stop 1
%
px
px
°
Stop 2
%
px
px
°
Stop 3
%
px
px
°
Stop 4
%
px
px
°
Stop 5
%
px
px
°
Stop 6
%
px
px
°
.lb-anim {
  animation: lb-anim 1s ease 0s 1 normal both;
}
@keyframes lb-anim {
  0% { opacity: 1; transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25% { opacity: 1; transform: translate(0px, -24px) scale(1) rotate(0deg); }
  40% { opacity: 1; transform: translate(0px, 0px) scale(1) rotate(0deg); }
  55% { opacity: 1; transform: translate(0px, -12px) scale(1) rotate(0deg); }
  70% { opacity: 1; transform: translate(0px, 0px) scale(1) rotate(0deg); }
  100% { opacity: 1; transform: translate(0px, 0px) scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-anim {
    animation: none;
    transition: none;
  }
}

Get weekly dev tools and tips