`animation-fill-mode: both` keeps the element in its animated state before and after

The `animation-fill-mode` property controls what styles apply to an element outside its active animation period. `forwards` retains the final keyframe state after the animation ends. `backwards` applies the first keyframe state during the `animation-delay` period, so the element does not flash its pre-animation style while waiting to start. `both` does both: the most useful value for entrance animations where you set `opacity: 0` in the first keyframe and want the element to be invisible during the delay.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Without both: element flashes at opacity:1 during the 0.3s delay */
.card {
  animation: fadeIn 0.4s ease 0.3s;
}

/* With both: invisible during delay, stays at final state after */
.card {
  animation: fadeIn 0.4s ease 0.3s both;
}