Trailing Dots

Trailing dots effect with CSS multi-transition

HTML

<div id="grid-layer"></div>
<div id="hint">Hover 'em!kkkkkkkkkkk</div>

CSS

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}
#grid-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 110%;
}
#grid-layer .grid {
  float: left;
  opacity: 0.075;
  -webkit-transition: opacity 2s;
  -moz-transition: opacity 2s;
  -ms-transition: opacity 2s;
  -o-transition: opacity 2s;
  transition: opacity 2s;
  border-radius: 100%;
  margin: 0 0 1px 1px;
}
#grid-layer .grid:hover {
  opacity: 1;
  -webkit-transition: opacity 0.05s;
  -moz-transition: opacity 0.05s;
  -ms-transition: opacity 0.05s;
  -o-transition: opacity 0.05s;
  transition: opacity 0.05s;
}
#grid-layer .grid.bright {
  opacity: 1 !important;
}

#hint {
  font-family: sans-serif;
  position: fixed;
  top: 51px;
  left: 0;
  color: #f1e6d4;
  background-color: rgba(0, 0, 0, .5);
  font-size: 30px;
  line-height: 50px;
  width: 204px;
  text-align: center;
}

JavaScript

$(function() {
  var $layer = $('#grid-layer');

  var layerW = $layer.width();
  var layerH = $layer.height();

  var gridW = 50;
  var gridH = gridW;
  var gridCol = Math.floor(layerW / gridW);
  var gridRow = Math.floor(layerH / gridH);
  
  var colors = ['#f1e6d4', '#ba3d49', '#791f33', '#9f9694', '#e3e1dc'];

  for (var row = 0; row < gridRow; row++) {
    for (var col = 0; col < gridCol; col++) {
      var $grid = $('<div />')
        .addClass('grid')
        .width(gridW)
        .height(gridH)
        .css('backgroundColor', colors[Math.floor(Math.random() * 5)]);
      if (row === 0 && col % 3 == 0 && col < gridCol - 1) {
        $grid.addClass('bright');
      }
      $grid.appendTo($layer);
    }
  }
});