Transition Speed Test by mbostock

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  width: 720px;
  margin: 20px auto 20px auto;
}

#d3 {
  outline: 1px red solid;
  width: 720px;
  overflow: hidden;
}

#d3 div {
  width: 5px;
  height: 5px;
  background-color: white;
  outline: 1px black solid;
  float: left;
  margin: 5px;
  display: block;
}

</style>

<p><button id="click">Click me!</button> Built with <a href="https://d3js.org/">D3</a>. A response to Rich Bradshaw’s <a href="//css3.bradshawenterprises.com/demos/speed.php">jQuery <i>vs.</i> CSS transition speed test</a>.

<div id="d3"></div>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var div = d3.select("#d3").selectAll("div")
    .data(d3.range(48 * 48))
  .enter().append("div");

d3.select("#click").on("click", function() {
  div
      .style("background-color", null)
      .style("outline-color", null)
    .transition()
      .duration(1000)
      .style("background-color", "black")
      .style("outline-color", "red");
});

</script>