TTULAKITO
Designer

CSS Animation Generator

Build CSS keyframe animations and copy ready-to-use code.

All tools

Controls

CSS

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

.element {
  animation: fadeUp 800ms ease-out 0ms;
}

Frequently asked questions

What's the difference between transition and animation?
Transitions interpolate between two states triggered by something like :hover, while animations run independently using @keyframes with multiple steps. Use transition for state changes and animation for autonomous motion.
How do I make a CSS animation loop forever?
Set animation-iteration-count: infinite. Pair it with animation-direction: alternate if you want it to play forward then backward instead of restarting abruptly.
Why does my CSS animation jank on mobile?
Animating properties like width, top, or margin forces layout recalculation every frame. Stick to transform and opacity, which the browser can offload to the GPU compositor.