Steps

by stopsatgreen

HTML

<div id="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS

#container {
    border: 1px solid;
    height: 100px;
    width: 250px;
}
#container div {
    background-color: red;
    height: 50px;
    width: 50px;
}
#container .one { transition: all 2s steps(4,start); }
#container .two { transition: all 2s steps(4,end); }
#container:hover div { transform: translate(200px); }