JSFiddle - React, Tailwind, and code Playground

by vikaskbh

HTML

<input type="button" value="Slide Up" onclick="animate('slideup','#box')" >
<input type="button" value="Slide Down" onclick="animate('slidedown','#box')">
<input type="button" value="Fade Out" onclick="animate('fadeout','#box')">
<input type="button" value="Fade In" onclick="animate('fadein','#box')">
<input type="button" value="Move Right" onclick="moveright('#box')">     
<input type="button" value="Move Down" onclick="movedown('#box')">    

    <hr/>    

<div class="box animate" id="box"></div>

CSS

.box {
	height: 100px;
	width: 100px;
	background-color: #4679BD;
	border: 1px solid #335A8E;
	border-radius: 5px;
   
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.animate {    
	-webkit-animation-duration: 0.6s;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;

	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	animation-iteration-count: 1;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes "slideup" {
 from {
    height: 100px;
 }
 to {
    height: 0;
 }

}

@-moz-keyframes slideup {
 from {
   height: 100px;
 }
 to {
   height: 0;
 }

}

@-webkit-keyframes "slideup" {
 from {
   height: 100px;
 }
 to {
   height: 0;
 }

}

@-ms-keyframes "slideup" {
 from {
   height: 100px;
 }
 to {
   height: 0;
 }

}

@-o-keyframes "slideup" {
 from {
   height: 100px;
 }
 to {
   height: 0;
 }

}

@keyframes "slidedown" {
 from {
    height: 0;
 }
 to {
    height: 100px;
 }

}

@-moz-keyframes slidedown {
 from {
   height: 0;
 }
 to {
   height: 100px;
 }

}

@-webkit-keyframes "slidedown" {
 from {
   height: 0;
 }
 to {
   height: 100px;
 }

}

@-ms-keyframes "slidedown" {
 from {
   height: 0;
 }
 to {
   height: 100px;
 }

}

@-o-keyframes "slidedown" {
 from {
   height: 0;
 }
 to {
   height: 100px;
 }

}

@keyframes "fadeout" {
 from {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
 to {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }

}

@-moz-keyframes fadeout {
 from {
   filter: alpha(opacity=100);
  ...

JavaScript

function animate(what,find){
    element = document.querySelector(find);
    element.className = "box animate";
    resetClass(element);
    addClass(element,what);
}

function movedown(elem){
    
    element = document.querySelector(elem);
    
    addClass(element,"movedown_transition"); 
    setTimeout(function(){
        removeClass(element,"movedown_transition"); 
    },1000);
}


function moveright(elem){
    
    element = document.querySelector(elem);
    
    addClass(element,"moveright_transition"); 
    setTimeout(function(){
        removeClass(element,"moveright_transition"); 
    },1000);

}

function resetClass(el) {
    var class_to_remove = ['slideup','slidedown','facein','fadeout'];
    var each_class = el.className.split(" ");
    newclass = [];
    for (i=0 ; i < each_class.length ; i++) {
        if(class_to_remove.indexOf(each_class[i]) >= 0){
            continue;
        }
        newclass.push(each_class[i]);
    }
    el.className = newclass.join(" ");
}

function addClass(el,cl){
    el.className = el.className + " " + cl;
}

function removeClass(el,cl){
    var each_class = el.className.split(" ");
    newclass = [];
    for (i=0 ; i < each_class.length ; i++) {
        if(each_class[i] == cl){
            continue;
        }
        newclass.push(each_class[i]);
    }
    el.className = newclass.join(" ");
}