JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div id="message" class="off">
    <div id="carte"></div>
    <div id="enveloppe"></div>
</div>
<button>test</button>

CSS

button
{
    position: absolute;
    right: 20px;
    bottom: 20px;
}
#message
{
    position: relative;
    padding: 100px;
    overflow: hidden;
    height: 300px;
}
#message.off #carte
{
    -moz-animation-duration: 1s;  
    -moz-animation-name: carte-off;
    -moz-animation-direction: alternate;
    -moz-transform: none;
    z-index: 1;
}
#message.off #enveloppe
{
    -moz-animation-duration: 1s;  
    -moz-animation-name: enveloppe-off;
    -moz-animation-direction: alternate;
    -moz-transform: none;
}
#message.on #carte
{
    -moz-animation-duration: 1s;  
    -moz-animation-name: carte-on;
    -moz-animation-direction: alternate;
    -moz-transform: rotate(-5deg) translatex(-40px) translatey(-20px);
    z-index: -1;
}
#message.on #enveloppe
{
    -moz-animation-duration: 1s;  
    -moz-animation-name: enveloppe-on;
    -moz-animation-direction: alternate;
    -moz-transform: none;
}
#carte
{
    width: 400px;
    height: 300px;
    background-color: red;
    position: absolute;
    -moz-transform: rotate(-5deg) translatex(-40px) translatey(-20px);
    -moz-transform-origin: top left;
    z-index: -1;
}
#enveloppe
{
    width: 400px;
    height: 300px;
    background-color: green;
    position: absolute;
    -moz-transform-origin: top left;
}
@-moz-keyframes carte-off
{  
    0%
    {  
        -moz-transform: rotate(-5deg) translatex(-40px) translatey(-20px);
    }
    50%
    {
        -moz-transform: translatex(220px);
        z-index: 1;
    }
    100%
    {
        -moz-transform: none;
        z-index: 1;
    }  
}
@-moz-keyframes carte-on
{  
    0%
    {  
        -moz-transform: none;
    }
    50%
    {
        -moz-transform: translatex(220px);
        z-index: 1;
    }
    100%
    {
        -moz-transform: rotate(-5deg) translatex(-40px) translatey(-20px);
        z-index: 1;
    }  
}
@-moz-keyframes enveloppe-off
{  
    0%
    {  
        -moz-transform: none;
    }
    50%
    {
        -moz-transform: translatex(-220px)...

JavaScript

jQuery('button').click(function(){
    jQuery('#message').toggleClass('off').toggleClass('on');
});