AK
appkiro.com0%
100%
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.my-element {
animation: fadeIn 1s ease 0s 1 normal forwards;
}Pick an animation
Choose from the library or filter by category.
Customize timing
Set duration, easing, delay, iteration, direction, fill mode.
Preview live
Run the animation on the preview canvas; restart or randomize.
Copy the code
Export as CSS, full HTML, React, or Vue snippet.
CSS animations declare a sequence of style changes via @keyframes and attach them to elements with the animation shorthand. This tool gives you a visual editor for the common 80% of animation work without typing keyframe blocks by hand.
Filter by category (Entrance, Attention, Exit, etc.), search by name, then click any animation tile. The preview restarts immediately. The right panel always shows the keyframes and the animation shorthand so you can see exactly what gets applied.
Duration controls how long one cycle takes. Easing decides the rate of change. Delay defers the start. Iteration runs the animation N times, or set Infinite for endless loops. Direction reverses or alternates per cycle.
none snaps back. forwards keeps the final keyframe. backwards applies the first keyframe during delay. bothdoes both — the most useful default for entrance animations.
Switch the output tab to CSS, HTML, React, or Vue. Copy the snippet or download a standalone .css file.
transform and opacity only — both are GPU accelerated.will-change sparingly; remove after animation ends.@keyframes is a CSS at-rule that defines a sequence of style changes over the lifetime of an animation. You declare named steps from 0% to 100% (or use 'from' / 'to'), and the browser interpolates between them automatically.
The timing function controls the rate of change between keyframes. linear is constant speed; ease starts slow, speeds up, then slows; ease-in starts slow; ease-out ends slow; cubic-bezier(...) lets you draw a custom curve.
fill-mode: forwards keeps the element at the final keyframe state after the animation ends. Use it when the animation should leave the element in a new visual state (e.g. revealed, scaled up). 'backwards' applies the first keyframe during delay; 'both' does both.
Animating transform and opacity is GPU-accelerated and very efficient. Animating width, height, top, left, or any layout-triggering property is expensive and can drop frames. Stick to transform + opacity whenever possible.
Iteration count defaults to 1. Toggle 'Infinite' for endless looping or set a specific iteration count. Combine with direction: alternate so the animation reverses on every other run.