<div id="page">
    		<div class="clearfix">
        		<div class="sixth">
            		<h3 class="text-center"><code>linear</code></h3>
            		<div class="box red trans-linear"></div>
        		</div>
        		<div class="sixth">
            		<h3 class="text-center"><code>ease</code></h3>
            		<div class="box red trans-ease"></div>
        		</div>
        		<div class="sixth">
            		<h3 class="text-center"><code>ease-in</code></h3>
            		<div class="box red trans-ease-in"></div>
        		</div>
        		<div class="sixth">
            		<h3 class="text-center"><code>ease-out</code></h3>
            		<div class="box red trans-ease-out"></div>
        		</div>        		
        		<div class="sixth">
            		<h3 class="text-center"><code>ease-in-out</code></h3>
            		<div class="box red trans-ease-in-out"></div>
        		</div>       		
        		<div class="sixth">
            		<h3 class="text-center"><code>spring</code></h3>
            		<div class="box red trans-bouncy"></div>
        		</div>
    		</div>
    		<div class="clearfix text-center control-bar">
        		<button id="btn">Toggle All</button>
    		</div>
		</div>
.control-bar {
  bottom: 0;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
}

h3 {
  font-size: 10px
}

#btn {
  padding: 8px 24px;
  border-radius: 4px;
  border: none;
  background: orange;
  color: white;
}

#page {
  padding: 24px;
}

.box {
  padding-bottom: 100%;
}

.box:hover,
.box.active {
  padding-bottom: 120%;
}

.red {
  background-color: red;
}

.trans-linear {
  -webkit-transition: padding 0.5s linear;
  -moz-transition: padding 0.5s linear;
  -ms-transition: padding 0.5s linear;
  transition: padding 0.5s linear;
}

.trans-ease {
  -webkit-transition: padding 0.5s ease;
  -moz-transition: padding 0.5s ease;
  -ms-transition: padding 0.5s ease;
  transition: padding 0.5s ease;
}

.trans-ease-in {
  -webkit-transition: padding 0.5s ease-in;
  -moz-transition: padding 0.5s ease-in;
  -ms-transition: padding 0.5s ease-in;
  transition: padding 0.5s ease-in;
}

.trans-ease-out {
  -webkit-transition: padding 0.5s ease-out;
  -moz-transition: padding 0.5s ease-out;
  -ms-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
}

.trans-ease-in-out {
  -webkit-transition: padding 0.5s ease-in-out;
  -moz-transition: padding 0.5s ease-in-out;
  -ms-transition: padding 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out;
}

.trans-bouncy {
  transition: all 0.5s cubic-bezier(0.5, -1, 0.5, 2);
}
var btnsActive = false;

var btn = document.getElementById("btn");

btn.addEventListener("click", onBtnClick);

function onBtnClick() {

  console.log("button click");

  if (!btnsActive) {
    for (var i = 0; i < document.querySelectorAll(".box").length; i++) {
      var box = document.querySelectorAll(".box")[i];
      box.classList.add("active");
    }
  } else {
    for (var i = 0; i < document.querySelectorAll(".box").length; i++) {
      var box = document.querySelectorAll(".box")[i];
      box.classList.remove("active");
    }
  }

  btnsActive = !btnsActive;
}

External CSS

  1. https://codepen.io/flourish86/pen/MKNzVz/

External JavaScript

This Pen doesn't use any external JavaScript resources.