在无限的CSS3动画中暂停

Question

在无限的CSS3动画中暂停

15

我想制作一个动画，每3秒运行一次，不使用JavaScript。我的动画时长为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

4个回答

6

我不确定它是何时发布的，而且这不是最跨浏览器的方法（不支持像IE 9这样的旧浏览器），但你可以使用animationPlayState样式属性。如果你想查看相关文档，可以在这里找到。

animationPlayState=false
webkitAnimationPlayState=false

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

如您所见，这将使项目动画进入“已暂停”状态，要使其返回至离开动画的状态，您可以将其设置为该属性接受的“正在运行”状态。

我在Google浏览时发现了一个示例。

- GoreDefex

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不会移动，但动画会继续一段时间，产生暂停的效果。

- Wuijin

0

您可以在动画中添加一个结束状态，它会像延迟一样播放。请查看下面的示例，简单的动画运行4秒钟，但最后3秒钟被延迟。

body {
  perspective: 500px;
}

/* clear background */
h2 {
  text-align: center;
  padding: 16px;
  margin: 0;
}

/* crops animations that exceeds one line area */
.line {
  width: 100%;
  height: 4rem;
  overflow: hidden;
  padding: 0;
  margin-bottom: 16px;
}

/* flipping class and key frames*/
.flipX {
  animation: 4s anim-flipX ease infinite;
}
@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(9def);
  }
  
  20% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(360deg);
  }
  60% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(360deg);
  }
   100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(360deg);
  }
}

<body>
  <div class='line'>
    <h2 class='flipX'>flip vertical</h2>
  </div>
</body>

- Sanan Ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

似乎唯一实现这一目标的方法是延长动画持续时间至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);}
}