10. CSS Animation. Active key value

components/Key.js

@@ -26,13 +26,15 @@ const Key = {
 	template: `
     <div
 		:class="[
-			'key', 
-			keyContent.code, 
-			{ active: isActive }, 
-			{ shiftKeyPressed: isShift && shiftKey && !isActive }
-		]"
+					'key', 
+					keyContent.code, 
+					{ shiftKeyPressed: isShift && shiftKey && !isActive }
+				]"
 		@click="keyClick(keyContent)"
 	>
+		<div v-if="isActive" :class="['key', 'active', keyContent.code]">
+			<div>{{value}}</div>
+		</div>
 		<div class="main">{{main}}</div>
 		<div class="shifted">{{shifted}}</div>
 	</div>`,
@@ -57,6 +59,10 @@ const Key = {
 		},
 		isShift() {
 			return this.keyContent.code.includes('Shift')
+		},
+		value() {
+			const { main, shifted, code } = this.keyContent
+			return (this.shiftKey ? shifted : main) || code
 		}
 	},
 	methods: {

styles.css

@@ -12,10 +12,47 @@
 	font-size: 1.5rem;
 	cursor: pointer;
 	flex: 1;
+	position: relative;
 }
 
 .key.active {
-	background-color: red;
+	animation: pulse 1s;
+	/* position (4 lines) : */
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2;
+
+	width: 100%;
+	height: 100%;
+
+	/* to compensate .key style: */
+	padding: -0.5rem;
+	margin: -0.2rem;
+
+	/* to center content vertically and horizontally: */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	transform-origin: center;
+}
+
+@keyframes pulse {
+	0% {
+		background-color: black;
+		transform: scale(100%);
+	}
+	30% {
+		transform: scale(130%);
+	}
+	80% {
+		transform: scale(130%);
+	}
+	100% {
+		background-color: red;
+		transform: scale(100%);
+	}
 }
 
 .row {