/* source is https://codepen.io/Juxtopposed/pen/OJrLZvb */
/* I basically adjusted the transsitions on keyframes for each "span" for my html.Well basically it named each keyframe for each spane and gave the transition animation approriately */


.key {
	display: inline-block;
	letter-spacing: -4px;
	transition: transform 0.3s;
}

@keyframes pressDown1 {

	30%,
	40%,
	100% {
		transform: translateY(0);
	}

	35% {
		transform: translateY(6px);
	}
}

@keyframes pressDown2 {

	70%,
	80%,
	100% {
		transform: translateY(0);
	}

	75% {
		transform: translateY(6px);
	}
}

@keyframes pressDown3 {

	30%,
	40%,
	100% {
		transform: translateY(0);
	}

	35% {
		transform: translateY(6px);
	}
}

@keyframes pressDown4 {

	40%,
	50%,
	100% {
		transform: translateY(0);
	}

	45% {
		transform: translateY(6px);
	}
}

@keyframes pressDown5 {

	20%,
	30%,
	100% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(6px);
	}
}

@keyframes pressDown6 {

	60%,
	70%,
	100% {
		transform: translateY(0);
	}

	65% {
		transform: translateY(6px);
	}
}

@keyframes pressDown7 {

	10%,
	20%,
	100% {
		transform: translateY(0);
	}

	15% {
		transform: translateY(6px);
	}
}

@keyframes pressDown8 {

	35%,
	45%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(6px);
	}
}

.key:nth-child(1) {
	animation: pressDown1 2s infinite;
}

.key:nth-child(2) {
	animation: pressDown2 3s infinite;
}

.key:nth-child(3) {
	animation: pressDown3 4s infinite;
}

.key:nth-child(4) {
	animation: pressDown4 2.5s infinite;
}

.key:nth-child(5) {
	animation: pressDown5 2.5s infinite;
}

.key:nth-child(6) {
	animation: pressDown6 3.5s infinite;
}

.key:nth-child(7) {
	animation: pressDown7 2.2s infinite;
}

.key:nth-child(8) {
	animation: press
}