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.