Play me
@keyframes
@keyframes toolora-anim {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}animation: toolora-anim 600ms ease 0ms 1 normal both;
Duration600ms
Delay0ms
How to use
01
Choose a preset and name it
Select fadeIn, slideUp, scaleIn, rotateIn, bounce, or pulse from the Preset dropdown, then type a name in the Name field. The name flows into both the @keyframes rule and the shorthand.
02
Tune timing and watch the replay
Set Duration (100 to 3000ms) and Delay, pick an easing from the seven options, choose an iteration count up to infinite, and set a direction. Press Replay to run the animation again instantly.
03
Copy both blocks at once
The output shows the @keyframes definition and the one-line animation shorthand beneath it. The Copy all button grabs the pair together, so nothing gets pasted without its other half.
Why CSS Animation Generator
- Six built-in animation presets, fade, slide, scale, rotate, bounce, pulse.
- Tweak duration, delay, easing, iteration, direction with live replay.
- Outputs ready-to-paste @keyframes + animation shorthand.
Common questions
Which presets ship with the css animation generator?
Six: fadeIn, slideUp, scaleIn, rotateIn, bounce, and pulse. The first four are entrance effects that animate opacity together with a transform, while bounce and pulse are attention effects that work best paired with the alternate direction and a higher iteration count.
What exactly does Copy all include from the keyframes generator?
Two things: the complete @keyframes block with its from and to frames, and the animation shorthand line that references it by name with your duration, easing, delay, iteration, direction, and a both fill mode. Paste them into any stylesheet and the animation runs as previewed.
How do I make an animation loop forever?
Set Iteration to infinite. For bounce or pulse, also switch Direction to alternate so each cycle plays forward then backward, which reads as smooth continuous motion instead of a repeated snap back to the first frame. An animation css maker only gets you so far; those two selects together are what make loops look intentional.
Why do some animations snap back to the start when they finish?
That's a missing fill mode, the most common keyframe bug there is. Without one, the element reverts to its pre-animation styles on the final frame. The shorthand generated here always ends with both, which holds the from state during any delay and freezes the to state afterward.
Can I rename the animation before copying the keyframes?
Yes, and you should. Type into the Name field and both the @keyframes identifier and the shorthand reference update together, so they can never drift apart. Descriptive names like card-slide-up make the copied CSS readable in review six months later.
What do the two cubic-bezier easing options actually feel like?
cubic-bezier(0.16, 1, 0.3, 1) starts fast and settles into a long, gentle stop, a favorite for panels and modals. cubic-bezier(0.34, 1.56, 0.64, 1) has a control value above 1, so it overshoots the target and springs back, giving buttons and badges a playful pop.
Is the output of this css animation code generator safe for performance?
Yes, by design. Every preset animates only opacity and transform, the two properties browsers can composite without recalculating layout or repainting. That keeps the motion smooth at 60fps even on mid-range phones, which hand-rolled animations of width, height, or top rarely manage.