.easingContainer {
	width: 100%;
	max-width: 100px;
	display: block;
	height: 20px;
	padding-right: 20px;
	border-radius: 8px;
	margin: 6px;
	background-color: #00000066;
}

.easingElement {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin-left: 0%;
	background-color: darkcyan;
	animation-play-state: paused;
	animation-iteration-count: 1;
	animation-duration: 600ms;
	transition-duration: 0ms;
	transition-property: margin-left color;
	animation-fill-mode: forwards;
}

.easingContainer:hover .easingElement {
	animation-play-state:running;
	background-color: cyan;
	transition-duration: 600ms;
}

@keyframes easeInElastic {
	0% {
		margin-left: 0%;
	}

	4% {
		margin-left: 0.04%;
	}

	8% {
		margin-left: 0.16%;
	}

	14% {
		margin-left: 0.17%;
	}

	18% {
		margin-left: -0.04%;
	}

	26% {
		margin-left: -0.58%;
	}

	28% {
		margin-left: -0.55%;
	}

	40% {
		margin-left: 1.56%;
	}

	42% {
		margin-left: 1.64%;
	}

	56% {
		margin-left: -4.63%;
	}

	58% {
		margin-left: -4.4%;
	}

	72% {
		margin-left: 13.12%;
	}

	86% {
		margin-left: -37.06%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeOutElastic {
	0% {
		margin-left: 0%;
	}

	16% {
		margin-left: 132.27%;
	}

	28% {
		margin-left: 86.88%;
	}

	44% {
		margin-left: 104.63%;
	}

	59% {
		margin-left: 98.36%;
	}

	73% {
		margin-left: 100.58%;
	}

	88% {
		margin-left: 99.8%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeInOutElastic {
	0% {
		margin-left: 0%;
	}

	4% {
		margin-left: 0.08%;
	}

	8% {
		margin-left: 0.1%;
	}

	18% {
		margin-left: -0.52%;
	}

	20% {
		margin-left: -0.39%;
	}

	28% {
		margin-left: 2.35%;
	}

	30% {
		margin-left: 2.39%;
	}

	38% {
		margin-left: -9.27%;
	}

	40% {
		margin-left: -11.75%;
	}

	60% {
		margin-left: 111.75%;
	}

	62% {
		margin-left: 109.27%;
	}

	70% {
		margin-left: 97.61%;
	}

	72% {
		margin-left: 97.65%;
	}

	80% {
		margin-left: 100.39%;
	}

	82% {
		margin-left: 100.52%;
	}

	90% {
		margin-left: 99.97%;
	}

	92% {
		margin-left: 99.9%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeOutInElastic {
	0% {
		margin-left: 0%;
	}

	8% {
		margin-left: 66.135%;
	}

	14% {
		margin-left: 43.44%;
	}

	22% {
		margin-left: 52.315%;
	}

	29.5% {
		margin-left: 49.18%;
	}

	36.5% {
		margin-left: 50.29%;
	}

	44% {
		margin-left: 49.9%;
	}

	50% {
		margin-left: 50%;
	}

	50% {
		margin-left: 50%;
	}

	52% {
		margin-left: 50.02%;
	}

	54% {
		margin-left: 50.08%;
	}

	57% {
		margin-left: 50.085%;
	}

	59% {
		margin-left: 49.98%;
	}

	63% {
		margin-left: 49.71%;
	}

	64% {
		margin-left: 49.725%;
	}

	70% {
		margin-left: 50.78%;
	}

	71% {
		margin-left: 50.82%;
	}

	78% {
		margin-left: 47.685%;
	}

	79% {
		margin-left: 47.8%;
	}

	86% {
		margin-left: 56.56%;
	}

	93% {
		margin-left: 31.47%;
	}

	100% {
		margin-left: 100%;
	}

}


@keyframes easeInBounce {
	0% {
		margin-left: 0%;
	}

	4% {
		margin-left: 1.54%;
	}

	8% {
		margin-left: 0.66%;
	}

	18% {
		margin-left: 6.25%;
	}

	26% {
		margin-left: 1.63%;
	}

	46% {
		margin-left: 24.98%;
	}

	64% {
		margin-left: 1.99%;
	}

	76% {
		margin-left: 56.44%;
	}

	88% {
		margin-left: 89.11%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeOutBounce {
	0% {
		margin-left: 0%;
	}

	12% {
		margin-left: 10.89%;
	}

	24% {
		margin-left: 43.56%;
	}

	36% {
		margin-left: 98.01%;
	}

	54% {
		margin-left: 75.02%;
	}

	74% {
		margin-left: 98.37%;
	}

	82% {
		margin-left: 93.75%;
	}

	92% {
		margin-left: 99.34%;
	}

	96% {
		margin-left: 98.46%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeInOutBounce {
	0% {
		margin-left: 0%;
	}

	2% {
		margin-left: 0.77%;
	}

	4% {
		margin-left: 0.33%;
	}

	10% {
		margin-left: 3%;
	}

	14% {
		margin-left: 0.98%;
	}

	22% {
		margin-left: 12.42%;
	}

	32% {
		margin-left: 1%;
	}

	42% {
		margin-left: 40.32%;
	}

	50% {
		margin-left: 50%;
	}

	58% {
		margin-left: 59.68%;
	}

	68% {
		margin-left: 99.01%;
	}

	78% {
		margin-left: 87.58%;
	}

	86% {
		margin-left: 99.02%;
	}

	90% {
		margin-left: 97%;
	}

	96% {
		margin-left: 99.67%;
	}

	98% {
		margin-left: 99.23%;
	}

	100% {
		margin-left: 100%;
	}

}

@keyframes easeOutInBounce {
	0% {
		margin-left: 0%;
	}

	6% {
		margin-left: 5.445%;
	}

	12% {
		margin-left: 21.78%;
	}

	18% {
		margin-left: 49.005%;
	}

	27% {
		margin-left: 37.51%;
	}

	37% {
		margin-left: 49.185%;
	}

	41% {
		margin-left: 46.875%;
	}

	46% {
		margin-left: 49.67%;
	}

	48% {
		margin-left: 49.23%;
	}

	50% {
		margin-left: 50%;
	}

	50% {
		margin-left: 50%;
	}

	52% {
		margin-left: 50.77%;
	}

	54% {
		margin-left: 50.33%;
	}

	59% {
		margin-left: 53.125%;
	}

	63% {
		margin-left: 50.815%;
	}

	73% {
		margin-left: 62.49%;
	}

	82% {
		margin-left: 50.995%;
	}

	88% {
		margin-left: 78.22%;
	}

	94% {
		margin-left: 94.555%;
	}

	100% {
		margin-left: 100%;
	}

}