Visually create custom CSS animations. Fine‑tune keyframes, timing, and easing – then copy the ready‑to‑use code.
@keyframes define the intermediate steps. The animation property then controls the timing and behaviour. Use the generator above to experiment.
animation shorthand: duration | timing | delay | iteration | direction | fill-mode
Example: animation: slide 1s ease 0s infinite alternate forwards;
linear – constant speedease – slow start, fast, slow endease-in – slow startease-out – slow endcubic-bezier(n,n,n,n) – complete controlforwards retains the last keyframe state after animation ends. backwards applies the first keyframe before the delay. both combines both.