CSS Animation & Easing Builder

Names

Keyframe steps

A step where translate, rotate and scale are all at rest and opacity is 1 prints an empty block — there is nothing there to say.

Timing

Delay can be negative — the animation starts as though it had already been running for that long, which is how a group of elements sharing one @keyframes rule gets staggered.

Preview

CSS


      

    

  


  

    Built and previewed entirely in this browser. The preview genuinely runs the @keyframes rule above it, via
    a stylesheet this tool writes and owns completely — every value in it is a clamped number or a
    sanitised name, so nothing typed here can write a second rule or reach outside this box.
  

  





The CSS Animation & Easing Builder needs JavaScript: the
  keyframes, the curve and the running preview are all built live in this browser. With JavaScript switched
  off there is nothing to do the work.