JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background:#98bf21;height:100px;width:100px;position:absolute; "></div>

CSS

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
div {
    -webkit-animation: NAME-YOUR-ANIMATION 2s infinite;
    -moz-animation: NAME-YOUR-ANIMATION 2s infinite;
    -o-animation: NAME-YOUR-ANIMATION 2s infinite;
    animation: NAME-YOUR-ANIMATION 2s infinite;
    
    
}