Easy-to-use tool for creating and previewing CSS keyframe animations.
@keyframes myAnimation {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated-element {
animation: myAnimation 1s ease 1 normal none;
}
1. Select a preset or edit keyframes manually. 2. Adjust animation properties (duration, timing function, etc.). 3. Preview your animation. 4. Copy the generated CSS code.
A. The timing function determines the speed curve of the animation. 'ease' gives smooth start and end, 'linear' is constant speed, 'ease-in' starts slow, and 'ease-out' ends slow.
A. Select 'infinite' from the iteration count dropdown.
A. Click the 'Add Keyframe' button and enter the position (%) and properties. 0% and 100% represent the start and end.
A. fillMode determines styles before/after the animation. 'forwards' keeps the last keyframe state, 'backwards' applies the first keyframe early.
CSS animations combine @keyframes rules with the animation property to bring elements to life. Within @keyframes, you can freely define intermediate steps between 0% (from) and 100% (to), enabling everything from simple fade-ins to complex motion sequences. Use animation-duration to set the play time, animation-timing-function to control the speed curve, and animation-iteration-count to set the repeat count.
The timing function determines how an animation progresses over time. "ease" is the default — smooth start, faster middle, slower end. "linear" maintains constant speed. "ease-in" starts slow and accelerates, while "ease-out" starts fast and decelerates. Using cubic-bezier() lets you create fully custom speed curves with four control points, enabling fine-tuned spring effects or bounce-like motion.
Browsers process changes to transform and opacity on the GPU, so animations built around these two properties perform significantly better. Avoid animating layout properties like width, height, and margin, as they trigger reflow and cause performance issues. Declaring will-change: transform hints to the browser to optimize rendering ahead of time, but overusing it can consume excessive memory.