Steps

by stopsatgreen

HTML

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

CSS

#container {
    border: 1px solid;
    height: 300px;
    width: 100%;
}
#container div {
    background-color: red;
    height: 50%;
    width: 20%;
}
#container .one { transition: all 2s step-start; }
#container .two { transition: all 2s step-end; }
#container:hover div { transform: translate(400%); }