Make a pause during infinite CSS3 animation

Question

I try to make an animation that run every 3 seconds without JavaScript. My animation\'s duration is 1 second.

I\'m only able to wait 3seconds the fi

Answer 1

I was able to do this, as @Josh mentioned, by extending the animation. For example, if you want your animation to last 0.5 seconds with a 3 second pause, you make the entire animation 3.5 seconds, and then use percentages to extend it. (0.5 seconds is about 14% of 3.5 seconds.)

In the code below, I created a DIV with transparent gradient that is the same width as the parent, and then animated it from left to right to give a shimmer effect.

.shimmer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;

    background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
    background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
    background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); /* W3C */
    background-repeat: repeat-y;
    background-size: 30% 100%;
    left: -100%;

    z-index: 101;

    animation-name: shine;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes shine {
    0% { left: -100%; }
    14% { left: 100%; }
    100% { left: 100%; }
}

From 14% to 100%, the DIV doesn't move, but the animation continues for additional time, giving the effect of a pause.