CSS: animation-fill-mode

The animation-fill-mode property decides whether keyframe styles apply before an animation starts, after it ends, or both.

Keep the final frame

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

@keyframes appear {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

forwards keeps the styles from the last keyframe after the animation. both also applies the first keyframe during a delay.

Common mistakes

• Do not use fill mode as a substitute for a clear base style.
• Remember that computed animation styles can make later changes harder to understand.
• Keep the content usable when motion is disabled.