JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box"></div>
CSS
#box {
width: 50px;
height: 50px;
background: #696969;
}
JavaScript
function getVendorPrefix()
{
if('result' in arguments.callee) return arguments.callee.result;
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,
element = document.body,
prefix = '';
for(var prop in element.style) if(regex.test(prop)) {
prefix = prop.match(regex)[0];
break;
}
if('WebkitOpacity' in element.style) prefix = 'Webkit';
if('KhtmlOpacity' in element.style) prefix = 'Khtml';
return arguments.callee.result = {
prefix: prefix,
cssPrefix: '-' + prefix.toLowerCase() + '-'
};
}
var cssPrefix = getVendorPrefix().cssPrefix == '-moz-' ? '' : getVendorPrefix().cssPrefix;
var box = document.getElementById('box');
box.style[cssPrefix + 'transition'] = 'all 60s linear';
setTimeout(function () {
box.style[cssPrefix + 'transform'] = 'translateX(200px)';
setTimeout(function () {
box.style[cssPrefix + 'transition'] = 'none';
box.style[cssPrefix + 'transform'] = 'translateX(100px)';
}, 1000);
}, 0)