@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;
}(Dokumentaatio englanniksi)
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.