<section class="wrapper">
	<div class="ball"></div>
</section>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: black;
}
.wrapper {
	height: 80vh;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	border: 1px solid blue;
	background-color: lightblue;
	color: #444;
}

.ball {
	height: 200px;
	width: 200px;
	position: absolute;
	top: 20px;
	bottom: 0;
	left: calc(50% - 100px);
	background-color: darkblue;
	border-radius: 50%;
}

var bouncingBall = anime({
	targets: '.ball',
	translateY: '50vh',
	duration: 300,
	loop: true,
	direction: 'alternate',
	easing: 'easeInCubic',
	scaleX: {
		value: 1.05,
		duration: 150,
		delay: 268
	}
});