animations tweak

frontend/src/App.vue

@@ -139,4 +139,41 @@ h1,h2,h3,h4,p,span{
   opacity: 0;
   transform: translateY(30px);
 }
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.bounce-enter-active, .bounce-leave-active {
+  animation: bounce-in .5s;
+}
+
+.fade-enter, .bounce-leave-to {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes bounce-out {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
 </style>

frontend/src/components/Chooser.vue

@@ -45,4 +45,13 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
+
+.card {
+	width: 72pt;
+	min-width:72pt;
+	height: 120pt;
+}
+.card:hover {
+	transform: translate(0, -5px) scale(1.05, 1.05);
+}
 </style>

frontend/src/components/Lobby.vue

@@ -14,7 +14,9 @@
 			<player/>
 		</div>
 		<chat/>
+		<transition name="bounce">
 			<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/>
+		</transition>
 	</div>
 </template>