Question

我尝试制作一个每3秒运行一次不使用JavaScript 的动画。我的动画持续时间是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/

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

你能帮我吗？

修改谢谢你的答案，我也能做出这样的场景：等待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%的动画来延迟动画。

这样做，动画本身实际上存在人为延迟。您只需要进行数学运算即可确定此延迟与动画本身的总长度相关的时间。

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.E. 9这样的旧浏览器），但您可以使用animationPlayState样式道具。如果你想查看它，可以在found here上找到一些文档。

animationPlayState=false
webkitAnimationPlayState=false

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

正如您所看到的那样，将项目动画置于"paused"状态，将其放回动画关闭的位置，您可以将其设置为此道具接受的"running"状态。

我在浏览Google时发现了{p> Here is a quick example。

Answer 3

正如@Josh提到的那样，通过扩展动画，我能够做到这一点。例如，如果您希望动画持续0.5秒并暂停3秒，则将整个动画制作3.5秒，然后使用百分比来扩展它。（0.5秒约为3.5秒的14％。）

在下面的代码中，我创建了一个透明渐变的DIV，其宽度与父级相同，然后从左到右设置动画以产生闪光效果。

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

从14％到100％，DIV无法移动，但动画会持续更长时间，从而产生暂停效果。

在无限的CSS3动画中暂停

3 个答案: