Question

I’m pretty new to CSS3 animations so this is a tough one for me. I’m trying to create a kind of reflection effect on a topbar on my website to make users aware of the bar.

So I actually want a reflection wander from the left to the right of the bar rather quick and with easing.

I have two problems though …
1.) I have no idea why this thinkg won’t work with background-size:cover; or background-size:100% 100%? It does just work when I specify a pixel width, however I just want it always to be 100% because the bar itself is always 100% wide.

2.) I have no idea how I could make the thing pause for like 3 seconds. So the reflection effect should start when the page is loaded, then pause for 3 seconds and then repeat.

Is this possible?

<div class="masked">
    <span class="inner">
    This is some Text
    </span>
</div>

background: linear-gradient(-45deg,  rgba(85,85,85,1) 0%,rgba(85,85,85,1) 48%,rgba(255,255,255,1) 50%,rgba(85,85,85,1) 52%,rgba(85,85,85,1) 100%);
    background-size:1500px 20px;
    animation-name: masked-animation;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;

DEMO http://jsfiddle.net/7Akwf/

Can someone please help me with that?

Answer 1

To get the animation to pause 3 seconds and continue you have to first set animation-iteration-count: infinite; and then use the @keyframes definition to control the delay by using a percent to be the pause.

In the demo below, I’m using 0%-50% to be the full animation. Then I use %50-%100 to be the pause.

If you want to use background-size: 100% 100%;, you need to set your background-position: -2000px 0; so it’s totally off the left side of the screen if you want your animation to scroll by. You also need to adjust your @keyframes so it scrolls totally off the right side when done. Because of this extra distance, you’ll need to adjust your duration accordingly to get the effect you’re looking for.

Demo: http://jsfiddle.net/ThinkingStiff/jaRW3/

@keyframes masked-animation {
    0% {background-position: -2000px 0;}
    50% {background-position: 2000px 0;}
    100% {background-position: 2000px 0;}
}

Here I’m using a 6s duration, of which 50% will be the pause and %50 will be the animation, or 3 seconds each. It also waits 3 seconds before starting. This uses the shorthand syntax which saves a lot of space.

animation: masked-animation 6s ease-in-out 3s infinite;
background-position: -2000px 0;
background-repeat: no-repeat;
background-size: 100% 100%;