在无限的CSS3动画中暂停 [英] Make a pause during infinite CSS3 animation

问题描述

我尝试制作一个动画，该动画每3秒运行一次没有JavaScript 。我的动画的持续时间为1秒。

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

我只能等待3秒，然后是一个1s动画的循环。

I'm only able to wait 3seconds the first occurence then it's a loop of 1s animation.

到目前为止我的代码： https://jsfiddle.net/belut/aojp8ozn/32 /

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);}
}

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

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

我尝试了以下答案，但未成功：循环CSS3动画并暂停？

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

您能帮我吗？

编辑
很好的回答，我也能做到这一点：$ b​​ $ b等待2s，运行1s翻转，等待2s，运行1s back_flip，等待

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);}
} 

推荐答案

似乎实现此目标的唯一方法是扩展动画，使其持续时间 4s 而不是 1s 。然后，您可以通过将动画从 75％设置为 100％（而不是 0）来延迟动画％到 100％）。

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.

更新示例

.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);}
}

这篇关于在无限的CSS3动画中暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！