A CSS transition is an animation that is performed between two states only: a start and an end. But when you need more intermediate states, you should use CSS animation instead so that you can have more control by adding multiple keyframes with different percentages between the start and the end states. Take the following example:
@keyframes example {
0% { // 1st keyframe or start state.
background-color: red;
}
25% { // 2nd keyframe.
background-color: yellow;
}
50% { // 3rd keyframe.
background-color: blue;
}
100% { // 4th keyframe end state.
background-color: green;
}
}
0% is the start state while 100% is the end state of your animation. You can add more intermediate states between these two states by adding incremental percentages – for example, 10%, 20%, 30%, and so on. However, a CSS transition does not have this ability to add these keyframes. So, we can say that a CSS transition is a simple form of a CSS animation...
