在无限 CSS3 动画期间暂停

Question

我尝试制作一个 不使用 JavaScript 每 3 秒运行一次的动画。我的动画持续时间是 1 秒。

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

到目前为止我的代码： 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/

我尝试了这个答案但没有成功： Cycling CSS3 animation with a pause period?

你能帮我吗？

编辑 感谢出色的答案，我也可以制作这种情况：等待 2 秒，运行 1 秒翻转，等待 2 秒，运行 1 秒后翻，等待 2 秒。

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

原文由 B3luT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎实现这一点的唯一方法是扩展动画，使其持续 4s 而不是 1s 。 Then you could delay the animation by animating from 75% to 100% (rather than 0% to 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);}
}

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不确定它是什么时候发布的，它不是最跨浏览器的方法（不包括像 IE 9 这样的旧浏览器），但你可以使用 animationPlayState 样式属性。如果您想查看它， 这里 有一些关于此的文档。

 animationPlayState=false
webkitAnimationPlayState=false

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

如您所见，这将项目动画放入 "paused" 状态，要将其放回动画关闭的位置，您可以将其设置为 "running" 该道具接受的状态.

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

原文由 GoreDefex 发布，翻译遵循 CC BY-SA 4.0 许可协议