What is the difference between 50% keyframes and Animation direction in CSS?

What is the difference between the @keyframes set at only 0% and 50%, and the animation-direction: alternate?

FCC says by setting the @keyframes at only 50%, it will repeat itself. But for me it’s only getting faster (2x). Means the animation is happening twice faster in the given time. I don’t understand. Please explain the difference.

Can you post an example? I’m trying to come up with a situation where that would happen.