在无限的CSS3动画中暂停

Question

我尝试在没有JavaScript的情况下制作一个每3秒运行一次的动画.我的动画持续时间是1秒.

我只能在第一次出现时等待3秒,然后它就是1s动画的循环.

到目前为止我的代码: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);}
}

我知道如何使用javascript:https://jsfiddle.net/belut/fk3f47jL/1/

我试过这个答案没有成功:用一段暂停时间循环CSS3动画？

你能帮我吗？

编辑 感谢很好的答案我也能够做出这样的场景:等待2s,运行1s翻转,等待2s,运行1s back_flip,等待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

似乎实现这一目标的唯一方法是扩展动画,使其持续4s而不是1s.然后,您可以通过动画延迟动画75%到100%(而不是0%到100%).

这样做,动画本身基本上存在人为延迟.您只需要进行数学计算,以确定此延迟与动画本身的总长度相关的时间长度.

更新的示例

.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

我不确定它是什么时候发布的，它不是最跨浏览器的方法（不包括像 IE 9 这样的旧浏览器）但你可以使用animationPlayStatestyle 道具。如果您想查看，可以在此处找到有关此的一些文档。

animationPlayState=false
webkitAnimationPlayState=false

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

正如你所看到的，这把物品动画放到一个"paused"状态，把它放回它离开动画的地方，你可以将它设置为"running"这个道具接受的状态。

这是我在浏览 Google 时发现的一个简单示例。