CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover. Property changes do not take effect immediately. Over a period of time, the property changes take place. For example, if you change the color of an element from white to black, the change occurs instantly. The CSS changes occur at time intervals following an acceleration curve which can be customized.
Animations transitioning between two states are called implicit transitions as the states between the start and final states are defined by the browser implicitly.
fig1: Transition starting at a point A and ended at point B with no intermediate point.
CSS animation allows animation of HTML elements, unlike transition which only performs a point A to point B operation but can also make many more operations in between. Animations consist of two steps, the CSS animation defined in stylesheets and a set of keyframes indicating the start and end states of the animation.
fig2: Animation starting at point A ended at B with other Points in between.
Difference between transitions and animations:
Example 1: The following example demonstrates the transition effect of changing colour after hover is applied.
Example 2: The following example demonstrates changing the color using the animation.