motionlang · motion lab

apple.com in motion

Every easing curve, duration and keyframe animation designlang read off the live apple.com page — drawn, timed and replayed. Generated 2026-05-21.

Easing curves 6

easing-1 248×
cubic-bezier(0.4, 0, 0.6, 1)
steps 13×
non-bezier
steps(1)
steps 1×
non-bezier
steps(1, start)
easing-4 3×
cubic-bezier(0.25, 0.1, 0.3, 1)
linear 8×
linear
ease-in-out 2×
ease

Durations 5

instant 20ms
xs 100ms
sm 160ms
md 300ms
xl 1000ms

Keyframe animations 30

@keyframes globalnav-chevron-slide-in-hover

    

    

      
@keyframes globalnav-chevron-hover-off

      

    

    

      
@keyframes globalnav-flyout-slide-forward-next

      

    

    

      
@keyframes globalnav-flyout-slide-forward-previous

      

    

    

      
@keyframes globalnav-flyout-slide-back-previous

      

    

    

      
@keyframes globalnav-flyout-slide-back-next

      

    

    

      
@keyframes globalnav-scrim-height-change

      

    

    

      
@keyframes globalnav-fade-in

      

    

    

      
@keyframes globalnav-search-fade

      

    

    

      
@keyframes globalnav-search-fade-and-slide

      

    

    

      
@keyframes globalnav-search-fade-and-slide-to-close

      

    

    

      
@keyframes globalnav-search-slide-top-to-bottom