JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="screen1" class="flip-open">Screen 1</div>

<ul class="ctrl">
 <li class="fo">flip-open</li>
 <li class="fc">flip-close</li>
 <li class="fn">flip-next</li>
 <li class="fp">flip-prev</li>
 <li class="s-lc">slide-lc</li>
 <li class="s-cr">slide-cr</li>
 <li class="s-cl">slide-cl</li>
 <li class="s-tc">slide-tc</li>
 <li class="s-cb">slide-cb</li>
 <li class="s-bc">slide-bc</li>
 <li class="s-ct">slide-ct</li>
 <li class="bz">bounce-z</li>
</ul>

CSS

/*------------
    サンプル用 Panel
-------------*/

div#screen1 {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    color: #fff;
    background-color: #111;
    
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90px;
    font-weight: bold;

}

/*------------------------

    Flip

    これらのアニメクラスはどんな要素にもつけられますので
    必要なものだけ切り取って使うこともできます。
-------------------------*/

/*------------
    Open
-------------*/

.flip-open {
    /* #screenは最初消えてるから表示をONにしてる */
    display: block!important;
    -webkit-animation-name: flip-open;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: cubic-bezier(0.5,0,0.5,1);
}

@-webkit-keyframes flip-open {
    0% {
        -webkit-transform: perspective(2000) scale(0.9) rotateY(90deg);    
    }
    50% {
        -webkit-transform: perspective(2000) scale(0.9) rotateY(0deg);
    }
    100% {
        -webkit-transform: scale(1.0);
    }
}

/*------------
    Close
-------------*/

.flip-close {
    display: block!important;
    -webkit-animation-name: flip-close;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: cubic-bezier(0.5,0,0.5,1);
    -webkit-transform: scale(0);
}

@-webkit-keyframes flip-close {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.9);        
    }
    100% {
        background-color: #000;
        -webkit-transform: perspective(2000) scale(0.9) rotateY(-90deg);
    }
}


/*------------
    Next
-------------*/

.flip-next {
    display: block!important;
    -webkit-animation-name: flip-next;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-timing-function: cubic-bezier(0.5,0,0.5,1);
    -webkit-transform: scale(0)!important;
}

@-webkit-keyframes flip-next {
    0% {
        -webkit-transform: scale(1);
        rotateY(0deg)
    }
    100% {
        background-color: #000;
       ...