Using the base project, create a new project for this recipe called cssanimation and open the project folder. Now, follow these steps:
- Open the App.vue file. In the <template> section of the single file component, wrap the img HTML element with a Transaction component. In the Transaction component, add a name attribute with a value of "image":
alt="Vue logo" src="./assets/logo.png">
- In the <style> section of the single file component, create an .image-enter-active class with an animation property that has a value of bounce-in .5s. Then, create an .image-leave-active class with an animation property that has a value of bounce-in .5s reverse:
animation: bounce-in .5s;
animation: bounce-in .5s reverse;
- Finally, create a @keyframes bounce-in CSS rule. Inside it, do the following...