CSS: animation-delay

The animation-delay property sets how long the browser waits before starting a keyframe animation.

Basic example

.notice {
  animation: appear 300ms ease-out;
  animation-delay: 200ms;
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

A positive delay waits before the animation starts. A negative delay starts as if the animation had already been running for that amount of time.

Common mistakes

• Do not delay important feedback so long that users miss it.
• Test delayed motion when the user prefers reduced motion.
• Use animation-fill-mode if the pre-animation state must be controlled.