motionlang · motion lab

tailwindcss.com in motion

Every easing curve, duration and keyframe animation designlang read off the live tailwindcss.com page — drawn, timed and replayed. Generated 2026-06-12.

Easing curves 2

easing-1 263×
cubic-bezier(0.4, 0, 0.2, 1)
ease-in 1×
cubic-bezier(0.4, 0, 1, 1)

Durations 2

xs 150ms
md 300ms

Keyframe animations 5

@keyframes spin

    

    

      
@keyframes ping

      

    

    

      
@keyframes pulse

      

    

    

      
@keyframes bounce

      

    

    

      
@keyframes flash-code