JSFiddle - React, Tailwind, and code Playground
JavaScript
function tween(el, to, speed) {
if (el._isAnimating) clearInterval(el._tween);
var opacity = Number(window.getComputedStyle(el).opacity);
if (to == opacity) return; // não precisa animar
else el._isAnimating = true;
el.style.opacity = opacity;
var incr = 0.03 * (to > opacity ? 1 : -1);
el._tween = setInterval(function() {
var next = Number(el.style.opacity) + incr;
if ((incr > 0 && next > to) || (incr < 0 && next < to)) {
el.style.opacity = to;
return clearInterval(el._tween);
}
el.style.opacity = next;
}, speed / 50);
}
//Fuction Fade out
function fadeOut(elem, speed) {
tween(elem, 0, speed);
}
//Função fade in
function fadeIn(elem, speed) {
tween(elem, 1, speed);
}
// Exemplo
var h = document.querySelector('h1');
fadeOut(h, 1500);
setTimeout(function() {
fadeIn(h, 1500);
}, 2000);