JSFiddle - React, Tailwind, and code Playground

by Ivan Melgrati

HTML

<p class="shine-me">This is a shine element</p>

CSS

.shine-me {
    width:100%; /*Make sure the animation is over the whole element*/

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}

p
{
    background-color:#6d6e71;
    padding:15px;
}