JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
<div id="backgroundOnly">
    <p>background only</p>
    <div id="backgroundAnimation">
        <p>background animation</p>
    </div>
</div>
</body>

CSS

#backgroundOnly {
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%);
background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); /* IE 10+ */
}

#backgroundAnimation {
    width: 200px; 
    height: 100px;
    background: red;
    position :relative;
    animation: spotLight 5s linear 0s infinite alternate;
    -webkit-animation: spotLight 5s infinite alternate linear 0s  ;
    background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); Safari /*5.1+, Mobile Safari, Chrome10+ */
}

@keyframes spotLight { /* IE 10+ */
    from {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}

@-webkit-keyframes spotLight { /*Safari 5.1+, Mobile Safari, Chrome10+ */
    from {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}