JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sun"></div>

CSS

@-webkit-keyframes sunrise {
    0% {
        bottom: 0;
        left: 0;
    }
    50% {
        bottom: 100px;
    }
    100% {
        bottom: 0;
        left: 400px;
    }
}
@-moz-keyframes sunrise {
    0% {
        bottom: 0;
        left: 0;
    }
    50% {
        bottom: 100px;
    }
    100% {
        bottom: 0;
        left: 400px;
    }
}
@keyframes sunrise {
    0% {
        bottom: 0;
        left: 0;
    }
    50% {
        bottom: 100px;
    }
    100% {
        bottom: 0;
        left: 400px;
    }
}
#sun {
    bottom: 0;
    position: absolute;
    -webkit-animation: sunrise 1s ease 1;
    -moz-animation: sunrise 1s ease 1;
    animation: sunrise 1s ease 1;
    background: yellow;
    border-radius: 50px;
    height: 50px;
    width: 50px;
}

JavaScript

function marqueeAnimation(content, animate) {
    var ow = content.parent().outerWidth(); // Container width
    var w = content.outerWidth(); // Content width
    var t = ow + w; // Travel (container + width of content)
    var pps = 100; // Pixels per second
    var s = t / pps; // Seconds

    var keyframeRules = "";
    for (var i = 0; i < prefixes.length; i++) {
        keyframeRules += '@' + prefixes[i] + 'keyframes ' + animate + ' {\n' +
            '    0% {' + prefixes[i] + 'transform: translateX(' + ow + 'px); }\n' +
            '    100% {' + prefixes[i] + 'transform: translateX(-' + w + 'px); }\n' +
            '}\n';
    };

    keyframeRules += ' .' + animate + ' { \n';
    for (p in prefixes) {
        keyframeRules += '    ' + prefixes[p] + 'animation: ' + animate + ' ' + s + 's linear 1; \n';
    }
    keyframeRules += "}";
    $('head').append($('<style/>').html(keyframeRules));
    content.addClass(animate);
}

//this var keeps track of number of times the text has marqueed
var marqueeCount = 1;

$(".marquee_three").bind('animationend webkitAnimationEnd', function () {
    
    var gameHighlightLast = $(".feed").children("#destacado.2").attr("time");
    
    if (marqueeCount == 5) {
        marqueeCount = 1;

         var gameHighlightLast = $(".feed").children("#destacado.2").attr("time");

        $.get("index.php", { "gameHighlightLast": gameHighlightLast })
        .done(function (data) {
            var hiddenItems = $(data).find(".feed").children("#destacado.2.hidden");
            $(".feed #destacado.2").html(hiddenItems.html());
        });

    }
    
    marqueeAnimation($('.feed #destacado.2'), "marquee_three");
});