CSS: animation-duration

The animation-duration property sets how long one animation cycle takes.

Basic example

.notice {
  animation-name: fade-in;
  animation-duration: 300ms;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

Use a time such as 300ms or 1s. A duration of 0s means the animation has no visible time to run.

How to choose a duration

Short feedback animations often feel responsive, while larger movement may need more time. Keep essential state changes easy to notice and do not make users wait for decorative motion.

Reduced motion

@media (prefers-reduced-motion: reduce) {
  .notice {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Use the user's reduced-motion preference as a signal to minimize or remove non-essential motion.