#container {
	height: 600px;
	width: 300px;
}

#person {
	position: absolute;
	top: 300px;
	left: 0px;
	height: 300px;
	width: 300px;
	background-image: url("https://connect-prd-cdn.unity.com/20221110/b3cb700f-0fa6-41bc-a197-ce6a14f2b588/SpriteSheet.png");
}

.animation-running {
	animation-name: running;
	animation-duration: 0.3s;
	animation-timing-function: steps(3);
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes running {
	from { background-position: 0px -300px; }
	to { background-position: -900px -300px; }
}

.animation-jumping {
	animation-name: jumping;
	animation-duration: 1s;
	animation-iteration-count: 1;
	background-position: -900px 0;
	animation-timing-function: ease-out;
}

@keyframes jumping {
	50% { 
		top: 0; 
		animation-timing-function: ease-in;
	}
}