Steps

by redky

HTML

<div class="box"></div>

CSS

.box {
    width: 40px;
    height: 40px;
    background: #aaa;
    transition: all 2s steps(2, start);
}

.trigger {
    margin-left: 400px;
}

JavaScript

document.querySelector('.box').onclick = function() {
  this.classList.toggle('trigger');
}