JSFiddle - React, Tailwind, and code Playground

by bitstarr

HTML

<div class="scaleMeIn">Woops Scale In</div>

<div class="scaleMeOut">Woops Scale Out</div>

<div class="fadeMeIn">Fucking Fade Me In</div>

<div class="fadeMeOut">Fucking Fade Me Out</div>

<div class="rotateMeLoop">Woops Rotate</div>


<form class="fakeDialog">
    <input placeholder="Enter Value Dude" />
    <button>Send</button>
</form>

CSS

.scaleMeIn {
animation: scale 1s;
-moz-animation: scale 1s;
-ms-animation: scale 1s;
-webkit-animation: scale 1s;
-o-animation: scale 1s;
}
.scaleMeOut {
animation: scale 1s reverse;
-moz-animation: scale 1s reverse;
-ms-animation: scale 1s reverse;
-webkit-animation: scale 1s reverse;
-o-animation: scale 1s reverse;
-moz-transform:scale(0);
transform:scale(0);
}

.rotateMeLoop {
animation: rotate 2s infinite;
-moz-animation: rotate 2s infinite;
-ms-animation: rotate 2s infinite;
-webkit-animation: rotate 2s infinite;
-o-animation: rotate 2s infinite;
}

.fadeMeIn {
animation: fade 2;
-moz-animation: fade 2s;
-ms-animation: fade 2s;
-webkit-animation: fade 2s;
-o-animation: fade 2s;
}

.fadeMeOut {
animation: fade 2 reverse;
-moz-animation: fade 2s reverse;
-ms-animation: fade 2s reverse;
-webkit-animation: fade 2s reverse;
-o-animation: fade 2s reverse;
opacity:0;
}

div {background:#333;color:#eee;font:bold 2em arial;padding:2em;text-align:center}
.rotateMeLoop {margin:2em;height:2em;width:2em}

.fakeDialog {
opacity:0;
transform:scale(0);
border:5px solid darkred;background:red;padding:1em;position:fixed;top:20%;left:50%;width:20em;margin-left:-10em;}

.fakeDialog input, .fakeDialog button {padding:1em}

body:hover .fakeDialog {
animation: fade 1s, scale 0.5s;
-moz-animation: fade 1s, scale 0.5s;
-ms-animation: fade 1s, scale 0.5s;
-webkit-animation: fade 1s, scale 0.5s;
-o-animation: fade 1s, scale 0.5s;
transform:scale(1);
opacity:1;
}

/* @section 1. Fade */

@-moz-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* @section 2. Rotate */

@-moz-keyframes rotate {
    from {
        -moz-transform:rotate(0);
       ...