Skip to main content

Animation Duration

Set how long one cycle of an animation takes.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

adu:0
animation-duration: 0;
adu:50
animation-duration: 50ms;
adu:100
animation-duration: 100ms;
adu:150
animation-duration: 150ms;
adu:200
animation-duration: 200ms;
adu:250
animation-duration: 250ms;
adu:300
animation-duration: 300ms;
adu:350
animation-duration: 350ms;
adu:400
animation-duration: 400ms;
adu:450
animation-duration: 450ms;
adu:500
animation-duration: 500ms;
adu:550
animation-duration: 550ms;
adu:600
animation-duration: 600ms;
adu:650
animation-duration: 650ms;
adu:700
animation-duration: 700ms;
adu:750
animation-duration: 750ms;
adu:800
animation-duration: 800ms;
adu:850
animation-duration: 850ms;
adu:900
animation-duration: 900ms;
adu:950
animation-duration: 950ms;
adu:1000
animation-duration: 1000ms;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.