transition

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <style>
      #block {
            background: lightgray;
            border: 1px solid black;
            width: 42px;
            height: 65px;
        }
    </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
    
  </head>

  <body>
    <div id="block"></div>
    <script src="script.js"></script>
  </body>

</html>

d3.select('#block')
    .transition()
        .call(configure, 200, 600, d3.easePolyOut)
        .style('width', '400px')
    .transition()
        .call(configure, 0, 600, d3.easeBounceOut)
        .style('height', '500px')
    .transition()
        .call(configure, 0, 1200, d3.easeQuadOut)
        .style('background-color', 'gold') ;

function configure (transition, delay, duration, ease) {
    return transition.delay(delay).duration(duration).ease(ease);
}

/* Styles go here */