JSFiddle - React, Tailwind, and code Playground

by Lena R

HTML

<div class = "background-2"></div>
<div class = "background">   <div class="platform"></div></div>

CSS

.platform {
    animation-name: lift-up;
    animation-duration: 0.5s;
	width:530px;
	height:325px;
    animation-fill-mode: forwards;	
	background:url(http://i.piccy.info/i9/a67f1637cc6cbf57dece046ca74242e4/1554185878/143107/1289718/cat.png);
}

.background {
    animation-name: logo;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    z-index: 1;
    width: 600px;
    height: 400px;
    background: #fff;
}

.background-2 {
    animation-name: kot;
    animation-duration: 3s;
    animation-delay: 4s;
    background:url(http://i.piccy.info/i9/3e095788daa0625dfb8b582d6e9b4641/1554185905/20751/1289718/logo.png);
    opacity: 0;
    width: 430px;
    height: 320px;
    z-index: 2;
    position: absolute;
    animation-fill-mode: forwards;
}


@keyframes lift-up {
    0% {
        transform: translateY(0px);
    }
  
    100% {
        transform: translateY(200px); 
    }
}

@keyframes logo {
       0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    } 
}

@keyframes kot {
       0% {
        opacity: 0;
    }
  
    100% {
        opacity: 1;
    } 
}