<p><button class="move-button">Move items</button></p>

<div class="grid grid-a">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid"></div>
button { font-size: 20px; }

.grid {
  width: 125px;
  background: #DDD;
  height: 125px;
  float: left;
  margin-right: 20px;
}

.grid-item {
  width: 20px;
  height: 20px;
  margin: 0 5px 5px 0;
  background: #09F;
  float: left;
  transition: transform 0.4s;
}

.grid-item.is-moved {
  transform: translateX(145px);
}
var moveButton = document.querySelector('.move-button');
var items = document.querySelectorAll('.grid-a .grid-item');

// get vendor transition property
var docElemStyle = document.documentElement.style;
var transitionProp = typeof docElemStyle.transition == 'string' ?
    'transition' : 'WebkitTransition';

moveButton.onclick = function() {
  for ( var i=0; i < items.length; i++ ) {
    var item = items[i];
    // stagger transition with transitionDelay
    item.style[ transitionProp + 'Delay' ] = ( i * 50 ) + 'ms';
    item.classList.toggle('is-moved');
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.