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 first occurence then it's a loop of 1s animation.

My code so far: https://jsfiddle.net/belut/aojp8ozn/32/

.face.back {
    -webkit-animation: BackRotate 1s linear infinite;
    -webkit-animation-delay: 3s;
    animation: BackRotate 1s linear infinite;
    animation-delay: 3s;
}

.face.front {
    -webkit-animation: Rotate 1s linear infinite;
    -webkit-animation-delay: 3s;
    animation: Rotate 1s linear infinite;
    animation-delay: 3s;
}


@-webkit-keyframes Rotate {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
    from {-webkit-transform:rotateY(180deg);}
    to {-webkit-transform:rotateY(540deg);}
} 
@keyframes Rotate {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
}
@keyframes BackRotate {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
}

I know how to do it with javascript: https://jsfiddle.net/belut/fk3f47jL/1/

I tried this answer without success: Cycling CSS3 animation with a pause period?

Can you help me please?

EDIT Thanks great answers i'm also able to make this scenario: wait 2s, run 1s flip, wait 2s, run 1s back_flip, wait 2s.

#f1_container {
      position: relative;
      margin: 10px auto;
      width: 90px;
      height: 90px;
      z-index: 1;
}
#f1_container {
      perspective: 1000;
}
#f1_card {
    width: 100%;
    height: 100%;
}
img {
    width: 90px;
    height: 90px;
}

.face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; 
}
.face.back {
      display: block;
      transform: rotateY(180deg);
}

.face.back {
    -webkit-animation: BackRotate 5s linear infinite;
}

.face.front {
    -webkit-animation: Rotate 5s linear infinite;
}


@-webkit-keyframes Rotate {
    0%,40% {-webkit-transform:rotateY(0deg);}
    50%,90% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
    0%,40% {-webkit-transform:rotateY(180deg);}
    50%,90% {-webkit-transform:rotateY(360deg);}
    100% {-webkit-transform:rotateY(540deg);}
} 

Answer 1

It seems like the only way to achieve this is to extend the animation so that it lasts 4s instead of 1s. Then you could delay the animation by animating from 75% to 100% (rather than 0% to 100%).

In doing so, there is essentially an artificial delay in the animation itself. You just have to do the math to figure out how long this delay is in correlation with the total length of the animation itself.

Updated Example

.face.back {
      display: block;
      transform: rotateY(180deg);
}

.face.back {
    -webkit-animation: BackRotate 4s linear infinite;
    animation: BackRotate 4s linear infinite;
}

.face.front {
    -webkit-animation: Rotate 4s linear infinite;
    animation: Rotate 4s linear infinite;
}


@-webkit-keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
} 
@keyframes Rotate {
    75% {-webkit-transform:rotateY(0deg);}
    100% {-webkit-transform:rotateY(360deg);}
}
@keyframes BackRotate {
    75% {-webkit-transform:rotateY(180deg);}
    100% {-webkit-transform:rotateY(540deg);}
}

Answer 2

I am not sure exactly when it was released, and it's not the most cross-browser approach (does not cover older browsers like I.E. 9) but you could use the animationPlayState style prop. Theres some documentation on this found here if you want to check it out.

animationPlayState=false
webkitAnimationPlayState=false

function pause() {
    var animationElement = document.getElementById('animatedItem');
    animationElement.style.animationPlayState='paused';
    animationElement.style.webkitAnimationPlayState='paused';
}

As you can see this put's the items animation into a "paused"state, to put it back where it left the animation off at, you can set it to the "running" state that this prop accepts.

Here is a quick example I found when browsing Google.