d3 transition ex4

<!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() // first transition
				.attr("x", 250) 
				.attr("width", 100)
				.attr("height", 100)
				.attr("opacity", 0.5)
				.attr("fill", "red")
				.delay(500)
				.duration(2500)
				.ease(d3.easeBounce)
				.on("end",function() { // on end of transition...
				    d3.select(this)
				    	.transition() // second transition
							.attr("x", 150) // second x
							.attr("width", 75) // second width
							.attr("height", 75) // second height
							.attr("opacity", 0.75) // second opacity
							.attr("fill", "blue") // second color
							.delay(500) // second delay
							.duration(2500) // second time
							.ease(d3.easeBounce); // second ease
				});
	});
</script>
</html>

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