CSS transitions allowed us to create animations using CSS for the first time. With CSS Transitions, we can define the initial and final state of the transition animation, but the progress in between the transition duration is a little out of control. It is just controlled using the
transition-delay properties. This enables us to define a start and end point for the animation, and the transition connects these together. What if we want to create an animation with multiple steps and take a nonlinear path in between the start and end of the animation?
CSS keyframe animations allow us to create multiple steps between an animation duration with different timing functions between these steps. This ...