Reverse CSS animation

[toolman]

Hi,

I have the following CSS and HTML which has a @shine@ animation going from left to right. What I am trying to do is have it go from right to left. I’ve tried reversing the percentages, but it stops the animation from working.
Can anyone tell me how I can reverse it?

Thanks!

<div>
<p class="shine"></p>
</div>

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

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -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:#c0c0c0;
    padding:15px;
}
div
{
    width:350px;
    margin:10px;
}

[PaulOB]

Change the background-position as that is what is animated.

e.g.

Something like.

@-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:0px 0px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:-800px -800px;
    }
}

You can lose the -webkit prefixes unless you are really supporting very old browsers and you should always be including the correct syntax anyway.

[toolman]

Many thanks, that worked