JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<div class="one">transition on "all"</div>
<div class="two">transition on "transform"</div>
<div class="three">transition on browser-prefixed "transform"</div>

CSS

div {    
    height: 100px;
    width: 200px;
}
.one {
    background-color: red;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition-property: all 1s ease;
    transition-property: all 1s ease;
}
.two {
    background-color: blue;
    -webkit-transition: transform 1s ease;
    -moz-transition: transform 1s ease;
    -o-transition-property: transform 1s ease;
    transition-property: transform 1s ease;
}
.three {
    background-color: green;
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition-property: -o-transform 1s ease;
    transition-property: transform 1s ease;
}

JavaScript

$(function() {
    $("div").click(function(e) {
        $(e.target).css("transform","translateX(100px)");
    });
});