CSS: animation-name

The animation-name property selects the @keyframes animation that an element should run.

Basic example

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

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

The value fade-in must match the keyframes name. A name alone does not make the animation visibly progress; give it a duration or use the shorthand.

Common mistakes

• Check spelling and hyphens in the animation name.
• Remember that none means no keyframe animation is selected.
• Keep essential content available if the animation is disabled.