Toster

Shut your mouth, fucking percent!

HTML

<div id="toster">
    <div class="item one"></div>
    <div class="item two"></div>
</div>

CSS

body {
    padding: 20px;
    background: #eee;
}

.t {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#toster {
    width: 50vw;
    height: 20vw;
    background: orange;
    opacity: .8;
    cursor: crosshair;
}

#toster > .item {
    width: 50%;
    height: 50%;
}

#toster > .one {
    background: red;
}

#toster > .two {
    background: green;
}

#toster:hover > .one {
    -moz-transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

#toster:hover > .two {
    -moz-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}