animation-fill-mode
Defines what styles apply before and after the animation plays. forwards holds the final state after the animation ends.
CSS
Intermediate
4 min read
animation-fill-mode Property
Example
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Without forwards: element returns to hidden after animation */
.bad { animation: slideIn 0.5s ease; }
/* With forwards: element stays visible */
.good { animation: slideIn 0.5s ease forwards; }
/* both: applies from state before delay, to state after end */
.full { animation: slideIn 0.5s 0.2s ease both; } Pro Tip
Use animation-fill-mode: forwards for one-shot entrance animations so the element stays in its final position.