The animation runs 2 seconds faster.The animation runs 2 seconds slower.The animation waits 2 seconds before starting.The animation repeats for 2 seconds.

Animation Showcase

Share Your Staggers

Created a cool staggered list reveal? Share your code snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Animation Delay

Pascual Vila

Frontend Instructor.

The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

Positive vs Negative Delay

Positive values (e.g., 2s) indicate that the animation should begin 2 seconds after being applied.

Negative values (e.g., -1s) cause the animation to begin immediately, but partway through its cycle. For example, if you specify -1s, the animation will start immediately, but at the 1-second mark of the animation sequence.

Practical Uses

Staggered Entrances: Apply increasing delays to a list of items to make them appear one by one.
Loop Synchronization: Use negative delays to make multiple looping elements look like they are in different phases of the same motion.

Syntax

/* Single animation */ animation-delay: 3s; /* Multiple animations */ animation-delay: 0s, 2s;

Animation Glossary

animation-delay: CSS property that defines when the animation will start. Values are in seconds (s) or milliseconds (ms).
Negative Delay: A value less than zero. The animation executes immediately, but starts at the specified offset within the animation cycle.
Staggering: A technique where sequential delays are applied to a group of elements to create a wave or cascading effect.

📖 INDEX

Temporal Mastery

Concept 1: Basic Delay

System Check

Timing Challenges