CSS Keyframe Editor

Drag stops on the timeline, set the properties each stop holds, and copy a ready @keyframes block. Existing CSS can be pasted back in. The whole editor state lives in the URL, so a link is the document.

Timeline

A timing function written inside a keyframe applies to the segment that begins at that stop, not the one ending there — so the easing you pick here governs the travel towards the next stop. The final stop begins no segment, so its slot is inert. steps() is what makes sprite-sheet animation possible; cubic-bezier() is under “Custom…”.

Properties at stop

Every stop writes the same transform functions in the same order — translate → rotate → scale → skew — even where a channel sits at its neutral value. Browsers only interpolate transforms component-wise when the function lists match; a mismatch silently drops to matrix interpolation and the motion goes wrong. The same holds for the filter list.

Preview

The preview runs inside a sandboxed <iframe> with its own document, so nothing from this page’s stylesheet can reach the animated element.

Output


    

      
      
      
    

    

    
    
Validity report (CSS.supports)

  


  
  

    
Import existing @keyframes

    
    

      
      
      
    

    

    

    
from and to are read as 0% and 100%,
    selector lists like 0%, 50% are expanded into separate stops, duplicate percentages collapse
    into one, and stops are re-sorted. Every declaration the editor cannot hold is counted and named below the button rather than quietly dropped, and a paste containing several animations lets you pick which one to load.