We've talked about animations in general, but the term covers no fewer than four different types that we can use within Less. They are animations, transitions, 2D transforms, and 3D transforms.
There are two out of these four properties where particular attention should be paid to how they work: animations and transitions. This doesn't mean that transforms are any less important—that's not the case. They merely work in a different way to transitions and are easier to understand and use.
Animations and transitions can appear to provide the same result but work in different ways. The two crucial differences are:
Transitions work on a two-state basis—they change an element from the starting position to the finishing position if we switch CSS states or if a pseudo-class has been triggered, such as
:hoveror:focusAnimations can use multiple
@keyframesor positions set between the starting and finishing state
The remaining two animation properties, 2D and 3D transforms...