Difference between animation and transition in CSS
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:
|Transitions cannot loop (You can make them do that but they are not designed for that).||Animations have no problem in looping.|
|Transitions need a trigger to run like mouse hover.||The animation just start. They don’t need any kind of external trigger source.|
|Transitions animate a object from one point to another.||Animation allows you to define Keyframes which varies from one state to another with various properties and time frame.|
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.