d3 transition ex3

<!DOCTYPE html>
<html lang="en">
<head>
	<title>I'm Learning D3</title>
	<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
	<style>
		button {
			position: absolute;
			margin-left: 6px;
			margin-top: 6px;
		}
	</style>
</head>
<body>
	<button id="start">Transition</button>
	<button id="reset" style="margin-left: 82px">Reset</button>
	
<script>
	//Make an SVG Container
	var svgContainer = d3.select("body").append("svg")
		.attr("width", 400)
		.attr("height", 200)
		.style("border-color", "black")
		.style("border-style", "solid")
		.style("border-width", "1px");
	 
	// Draw the Rectangle
	var rectangle = svgContainer.append("rect")
		.attr("x", 50)
		.attr("y", 50)
		.attr("width", 50)
		.attr("height", 50);

// Set up the reset button to move it back to 50,50
	d3.select("#reset").on("click", function() {
		rectangle
			.transition()
			.attr("x", 50)
			.attr("y", 50);
	});

d3.select("#start").on("click", function() {
		rectangle
			.transition()
			.attr("x", 250)
			.attr("width", 100)
			.attr("height", 100)
			.attr("opacity", 0.5)
			.attr("fill", "red")
			.delay(500)
			.duration(2500)
			.ease(d3.easeBounce); // Use the Bounce Transition Ease
	});
</script>
</html>

https://d3js.org/d3.v5.min.js