@keyframes cssap-anim {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.preview {
animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}(Documentatie in het Engels)
What it does
The CSS Animation Playground lets you design and preview CSS animations live in your browser. Pick an animated property (move, scale, fade, spin), dial in a duration and delay, choose a built-in easing curve - or sculpt your own cubic-bezier by dragging control-point handles - then copy the exact @keyframes and animation CSS to paste straight into your project. Everything runs client-side, so nothing you tune ever leaves your machine.
How to use it
- Use the Property segmented control to choose what animates: Move (
translateX), Scale, Fade (opacity), or Spin (rotate). - Set Duration (ms) and Delay (ms) with the number steppers.
- Pick an Easing preset (Linear, Ease, In, Out, In-out), or select Custom to open the curve editor.
- In the curve editor, drag the two accent handles to shape the cubic-bezier. The blue path and the preview update instantly as you drag.
- Toggle Iterations between Once and Loop.
- Hit Play to replay the preview from the start at any time, or Reset to restore the defaults.
- Copy the generated CSS from the output panel.
Examples
A snappy fade (ease-out, 250ms, once)
@keyframes cssap-anim {
from { opacity: 1; }
to { opacity: 0.15; }
}
.preview {
animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}A custom easing
Set Easing to Custom, then drag the first handle toward the bottom-left and the second toward the top-right for a quick-start, gentle-settle feel. The generated cubic-bezier(...) updates to match - copy it into your own transition or animation rule.
Good to know
- Custom easing: drag the two accent handles inside the unit box to shape the curve; the live path and the preview track your edits in real time.
- Copy-paste ready: rename the
cssap-animkeyframes and the.previewselector to match your own markup - the rest of the CSS is production-ready. - Private: the entire tool runs in your browser - no animation parameters are ever sent to a server.
- Related tools:
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
, JSON Formatter, and the rest of the CSS & Layout set.