Staggered & Sequenced CSS Animations

Choreograph list reveals with --i + calc() delays, chain multiple animations on one element, and peek at negative delays.

Stagger reveal

Each item gets style="--i: N" and animation-delay: calc(var(--i) * step). Hit Replay to re-trigger the cascade.

8
60ms
380ms
Direction
Last item starts at 420ms

Generated CSS


  


  

    
Sequence on one element

    
Comma-separated animations share one element — each phase waits for the previous delay + duration stack.


    

      

        

          

        

        
        

          
        

      


      

        

          Fade
          
          
        

        

          Move
          
          
        

        

          Color
          
          
        

      

    


    
Generated CSS

    

  


  

    
Negative delay — start mid-animation

    
A negative animation-delay skips the opening frames — useful when an element should look like it was already animating.


    

      

        
delay: 0s

        

          
        

        
animation-delay: 0s — starts at the beginning.

      

      

        
delay: -1s

        

          
        

        
animation-delay: -1s — jumps in halfway through a 2s loop.

      

    


    

      
    


    
Both dots use the same @keyframes neg-slide and 2s duration — only the delay differs. Negative values pull the playhead backward on the timeline.