CSS3 keyframe animations

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-timing-function and 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 makes our life easy as it creates complex animations using the concept of keyframes; otherwise, we will have to create multiple transitions in a sequence in order to create the full animation. In other words, transitions are a subset of what we...