What are CSS keyframes?

Keyframes define the stages of a CSS animation. Each keyframe specifies the style at a percentage of the animation duration. For example, 0% (start), 50% (middle), and 100% (end).

What is animation-fill-mode?

fill-mode controls whether styles are applied before/after the animation runs. forwards keeps the final keyframe state. backwards applies the first keyframe during delay. both does both.