JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="wrapper">

	<div id="container">
		<div id="window" class="">
			<span id="toto">Click to play</span>
		</div>
	</div>

</div>

CSS

#wrapper {
    width: 100%;
    margin: auto;
}

#container {
    width: 640px;
    position: relative;
    margin: auto;
}

#window {
    position: absolute;
    width: 640px;
    /* height: 960px; */
    height: 800px;
    background: red;
}

#window #toto {
    background: green;
    height: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
}

#info {
    position: absolute;
    top: 0;
    left: 0;
    background: yellow;
    width: 640px;
    height: 320px;
}

@-webkit-keyframes scale {

    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }
}

.scale {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(900px) rotateX(0);

    -webkit-animation: scale 2s 1 linear both;
    
}

@-webkit-keyframes toto {

    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }
    
    to {
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(900px) rotateX(-10deg);
    }
}

.scale2 {
    background: purple !important;

    -webkit-animation: toto 1.4s 1 ease both;
}

JavaScript

// Var
var $ = function(id) { return document.getElementById(id); };

// Listener
$('window').addEventListener('webkitAnimationEnd', function() {

	this.className = 'scale2';
}, false);

$('toto').addEventListener('click', function() {
	$('window').className = 'scale';
});