Animations go wrong when the window is being resized. (See the gif below)
The timing function of the animation doesn't seem to be consistent. It is slow in one cycle, and fast in another. Try to achieve it similar to the video provided in the assignment.
Bug - I was using the same animation name in all the media queries. That made the animations go haywire as soon as the viewport size crossed the query's boundary line.