JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<main>
  <figure>
      <img src=http://i.imgur.com/9iHCndo.png />
      <img src=http://i.imgur.com/ARZv1dy.png />
      <img src=http://i.imgur.com/Q2jTGlE.png />
  </figure>
</main>

CSS

*{box-sizing:border-box;padding:0; margin:0;}

:root,body{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background: ghostwhite;
}

main,figure{
    width:100%;
    height:100%;
    overflow:hidden
}
main{
    position:absolute;
    left:0;
    top:0
}
figure{
    position:relative
}
figure img:nth-child(1){
    animation: introLeft .6s ease
}
figure img:nth-child(2){
    transform:scaleX(-1);
    animation: introRight .6s ease
}
figure img:nth-child(3){
    width:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -100px;
    animation: introScale .9s ease
}
figure img:not(:nth-child(3)){
    width:48%
}

@keyframes introLeft {
    from{transform:translate3d(-100%,0,0)}
    to{transform:translate3d(0,0,0)}
}

@keyframes introRight {
    from{transform:translate3d(100%,0,0) scaleX(-1)}
    to{transform:translate3d(0,0,0) scaleX(-1)}
}
@keyframes introScale {
    0%{transform:scale(4);opacity:0}
    80%{transform:scale(4);opacity:0}
    100%{transform:scale(1);opacity:1}
}