JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

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

CSS

#box
    {
    height:200px;
    width:200px;
    background-color:red;
    position:absolute;
    left:-200px;
}

JavaScript

function applyTransition(node, value){

    if(node.style.transition !== undefined){
      node.style.transition = value;
    }else if(node.style.webkitTransition !== undefined){
      node.style.webkitTransition = value;
    }else if(node.style.mozTransition !== undefined){
      node.style.mozTransition = value;
    }
    
};

function applyTransform(node, value){

    if(node.style.transform !== undefined){
      node.style.transform = value;
    }else if(node.style.webkitTransform !== undefined){
      node.style.webkitTransform = value;
    }else if(node.style.mozTransform !== undefined){
      node.style.mozTransform = value;
    }

};

var box = document.getElementById("box");

applyTransition(box, 'all 1s ease-out');
applyTransform(box, 'translateX(400px)');