JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainimg">
    Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) 
    <br/>
    Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) 
</div>

CSS

#mainimg {
    background: red;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition : -webkit-filter 1000ms linear;
    -moz-transition : -moz-filter 1000ms linear
    transition : filter 1000ms linear
}

JavaScript

$('#mainimg').on('transitionend', function () {
    $(this).css({
        "webkitFilter" : "none",
        "mozFilter" : "none",
        "filter" : "none"
    });
}).css({
    "webkitFilter" : "grayscale(0%)",
    "mozFilter" : "grayscale(0%)",
    "filter" : "grayscale(0%)"
});