Animation Lab — CSS Keyframe Animations with Visual Controls

Create CSS keyframe animations with sliders for transform, timing and easing, watch a live preview, and copy the keyframes plus property block as code. This free online tool runs entirely in your browser — no data is ever uploaded to a server.

How to Use

1. Pick what to animate — translate, rotate, scale, opacity, color.

2. Dial in the motion — duration, iteration count and easing curves.

3. Watch the live preview — changes reflect in real time on the stage.

4. Copy the code — keyframes + animation property, ready to paste.

Example

Rotate 360° over 2 s with ease-in-out, infinite repeat — the lab emits both the @keyframes rule and the animation shorthand for your element.

Also check out the live tool at freeq.one/tools/animation-lab — part of the FreeQ.One suite of free online tools.