With the help of CSS, we can animate our application without the need to manually program the changes of DOM elements through JavaScript. Using special CSS properties dedicated exclusively to controlling animations, we can achieve beautiful animations and transitions.
To use the animations that are available in Vue, we need to use a component called Transition when an animation is being applied to a single element or a component called TransitionGroup when dealing with a list of components.
In this recipe, we will learn how to create a CSS animation and apply this animation to a single element on the Vue application.