JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<div class='overlay-container'>
    <div class='overlay'>this is text</div>
</div>

CSS

body, html { height: 100% }

.overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0;
    -webkit-perspective: 1000px;
    -webkit-transition: all 500ms;    
}
.overlay-container.is-visible { opacity: 1; }

.overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin-left: -200px;
    margin-top: -100px;
    background: #EEE;
    opacity: 0;
    -webkit-transition: all 700ms;
    -webkit-transform: rotateX(-80deg) scale(0.6);
}
.overlay.is-visible {
    opacity: 1;
    -webkit-transform: rotateX(0deg) scale(1);
}

JavaScript

var overlayContainer = $('.overlay-container'),
    overlay = $('.overlay');

$('body').on('click', function() {
    
    overlayContainer.addClass('is-visible');
    
    overlayContainer.on('webkitTransitionEnd', function() {
        overlayContainer.off('webkitTransitionEnd');
        
        overlay.addClass('is-visible');
    });
    
    
});