JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div class="phone">
    <img class="third" src="http://placehold.it/200x303" />
    <img class="second" src="http://placehold.it/200x302" />
    <img class="first" src="http://placehold.it/200x301" />
</div>

CSS

.phone {
    position: relative;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

.phone img {
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease-in-out;
}

.second {
    -webkit-transform: translate(200px, 0px);
}

.third {
    -webkit-transform: translate(0, 300px);
}

.animateLeft {
    -webkit-transform: translate(-200px, 0px);
}

.animateRight {
    -webkit-transform: translate(200px, 0px);
}

.animateUp {
    -webkit-transform: translate(0, -300px);
}

.animateDown {
    -webkit-transform: translate(0, 300px);
}

.animateReset {
    -webkit-transform: translate(0, 0);
}

JavaScript

var els = {
    first: document.querySelector('.first'),
    second: document.querySelector('.second'),
    third: document.querySelector('.third')
}

setTimeout(function(){
    els.first.classList.add('animateLeft');
    els.second.classList.add('animateReset');
}, 1000);

setTimeout(function(){
    els.second.classList.remove('animateReset');
    els.second.classList.add('animateUp');
    els.third.classList.add('animateReset');
}, 3000);

setTimeout(function(){
    els.third.classList.remove('animateReset');
    els.third.classList.add('animateDown');
    els.second.classList.add('animateReset');
}, 5000);

setTimeout(function(){
    els.second.classList.remove('animateReset', 'animateUp');
    els.second.classList.add('animateRight');
    els.first.classList.add('animateReset');
}, 7000);