<div class="bounce-wrapper">
	<div id="object"></div>
</div>
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

.bounce-wrapper {
	width: 100vw;
	height: 100vh;
	border: 15px solid #009688;
	position: relative;
	#object {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		background-color:#03A9F4;
		
	}
}
View Compiled
$(function () {
	var isDown = true;
	var isLeft = true;
	
	var lowLimit = 3;
	var highLimit = 6;
	
	// Adjust speed of H and V (for random feeling)
	var randHDuration = Math.floor(Math.random() * (highLimit * 1000)) + (lowLimit + 1000);
	var randVDuration = Math.floor(Math.random() * (highLimit * 1000)) + (lowLimit + 1000);

	function hAnimate() {
		if (isLeft) {
			$("#object").animate(
				{
					left: $(".bounce-wrapper").innerWidth() - $("#object").outerWidth()
				},
				{
					duration: randHDuration,
					easing: "linear",
					queue: false,
					complete: function () {
						isLeft = false;
						hAnimate();
					}
				}
			);
		} else {
			$("#object").animate(
				{
					left: 0
				},
				{
					duration: randHDuration,
					easing: "linear",
					queue: false,
					complete: function () {
						isLeft = true;
						hAnimate();
					}
				}
			);
		}
	}

	function vAnimate() {
		if (isDown) {
			$("#object").animate(
				{
					top: $(".bounce-wrapper").innerHeight() - $("#object").outerHeight()
				},
				{
					duration: randVDuration,
					easing: "linear",
					queue: false,
					complete: function () {
						isDown = false;
						vAnimate();
					}
				}
			);
		} else {
			$("#object").animate(
				{
					top: 0
				},
				{
					duration: randVDuration,
					easing: "linear",
					queue: false,
					complete: function () {
						isDown = true;
						vAnimate();
					}
				}
			)
		}
	}

	hAnimate();
	vAnimate();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js