How to do it...

Using the base project, create a new project for this recipe called cssanimation and open the project folder. Now, follow these steps:

1. 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":

<transition name="image">
  <img
    v-if="display"
    alt="Vue logo" src="./assets/logo.png">
</transition>

2. 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:

.image-enter-active {
  animation: bounce-in .5s;
}
.image-leave-active {
  animation: bounce-in .5s reverse;
}

3. Finally, create a @keyframes bounce-in CSS rule. Inside it, do the following...