JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<div class="foo">
    <div class="bar"></div>
</div>

CSS

.foo{
    background: url(http://blog.braudcommunications.com/wp-content/uploads/Google-logo.png); 
    background-size: 300px 100px;
    width: 300px;
    height: 100px;
    overflow: hidden;
}
.bar{
    width: 300px;
    height: 100px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(39%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.60)), color-stop(51%,rgba(255,255,255,0.8)), color-stop(52%,rgba(255,255,255,0)), color-stop(53%,rgba(255,255,255,0)));
   -webkit-animation: bganim 3s ease-in-out infinite;
    background-position: -140px;
}

@-webkit-keyframes bganim{
    from {background-position: -140px}
    to {background-position: 140px}
}