JSFiddle - React, Tailwind, and code Playground

by elkon

HTML

<div class="container">
    <div class="root">
        <div class="unfold" style="-webkit-animation-delay:0.25s;">
            <div class="unfold" style="-webkit-animation-delay:0.5s;">
                <div class="unfold" style="-webkit-animation-delay:0.75s;">
        </div>
        </div>
        </div>    
    </div>
</div>

CSS

@-webkit-keyframes unfold-first  {0%   {
        -webkit-transform-origin: center top;
        -webkit-transform: rotateX(-180deg); opacity:0; }50%  {-webkit-transform: rotateX(20deg); opacity:1;  }100% {-webkit-transform: rotateX(0deg);    }}

@-webkit-keyframes swing-out     {0%   {-webkit-transform: rotateX(0deg);    }30%  {-webkit-transform: rotateX(-30deg);  }60%  {-webkit-transform: rotateX(15deg);   }100% {-webkit-transform: rotateX(0deg);    }}

div {display:block;}

.container{
 left:200px;
    -webkit-transform: perspective( 1200px ) rotateY( 45deg );
        position:relative;
    -webkit-transform-style: preserve-3d;
               
}
.root{
    height:100px;
    width:300px;
    top:100px;
    position:absolute;
    background-color:red;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: swing-out 1.5s ease-in-out 0s 1 normal forwards;
    
}
.unfold{
    height:100px;
    width:300px;
    top:99px;
    position:absolute;
    background-color:#123456;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: unfold-first 1.5s ease-in-out 0s 1 normal forwards;
    
}