<h1>Comparison of Timing Functions</h1>
<div class="box box-1"></div>
<div class="box box-2"></div>
<button>animate</button>
html {
  font-size: 10px;
}

body {
  padding: 2rem;
  color: #555;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
}

h1 {
  color: #333;
  font-weight: 300;
  border-bottom: solid 1px #eee;
}

.box {
  margin-bottom: 2rem;
  width: 6rem;
  height: 6rem;
  background-color: #228eff;
  transition: transform 600ms;
}

.box-1 {
  transition-timing-function: ease-in;
}

.box-2 {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.box.animate {
  transform: translateX(20rem);
}

button {
  padding: 1rem 2rem;
  color: #fff;
  background-color: #ff3366;
  border: none;
  border-bottom: solid 0.2rem #cc0033;
  box-shadow: none;
  appearance: none;
  
  &:hover {
    background-color: #cc0033;
  }
}
var $boxes = document.querySelectorAll('.box');
var $btn = document.querySelector('button');

function animate($box) {
  $box.classList.toggle('animate');
}

$btn.addEventListener('click', e => {
  for (var i = 0; i < $boxes.length; i++) {
    animate($boxes[i]);
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.