JSFiddle - React, Tailwind, and code Playground

by Quadraxas

HTML

<div id="test"></div>

CSS

.fadein {
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -moz-animation: fadein 2s;
    /* Firefox */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera */
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox */
 @-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari and Chrome */
 @-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */
 @-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
​
/* Opera */
 @-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JavaScript

var i = -1;
var string = "BREAKING NEWS "
var array = string.split("");

Next = function () {
    i++;
    if (i > (array.length - 1)) {
        i = 0;
    }
    setTimeout(Slide, 50);
}

var x = document.getElementById('test');

function Slide() {
    var sp = document.createElement('span');
    sp.setAttribute('class', 'fadein');
    sp.appendChild(document.createTextNode(array[i]));
    x.appendChild(sp);
    setTimeout('Next()', 50);
}
Next();