Animation delay

The animation’s delay tells us when the animation starts. If the delay is set to 0, the animation will play immediately once triggered by a user action or page load. For instance, when a user clicks a button, a pop-up element can appear immediately with no perceptible pause.

When the delay is assigned a positive value, the animation initiates after a specific interval from the moment it's triggered. Consider an image gallery where each image fades in one after the other with a slight delay, creating an elegant sequence as the user scrolls down the page.

Alternatively, if a negative delay is employed, the animated element appears to already be in motion when triggered. For instance, upon page load, a banner might slide in from the left with a -200ms delay, making it look like it was already moving before the page even fully loaded.