动画中的设置超时[重复]答案

【问题标题】：Settimeout in animation [duplicate]动画中的设置超时[重复]
【发布时间】：2016-02-19 12:03:13
【问题描述】：

如何在我的动画中实现下面的代码，我的动画处于无限循环中，我希望在每个动画之后它会暂停 10 秒然后重新开始，我使用 animate.css

注意：我在下面粘贴了关键帧

setTimeout(function() {  
  // 1000 == 1 seconds
  // modify dom elements here  
  // your code here
}, 1000);

它的 HTML + CSS 代码

<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>


 .motext {
    animation-duration: 20s;
    animation-delay: 19s;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
     width:90%;
     max-width:1170px;
     margin:auto;
      text-align:right;
     position:relative;
    }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

【问题讨论】：

你可以在问题中加入@keyframes 吗？
@guest271314 你是什么意思？我正在使用 animate.css github.com/daneden/animate.css
@guest271314 等等我添加它，
没有试过animate.css，虽然要求应该是可能的。 19s 延迟应该只应用于第一个动画周期吗？
@guest271314 完成！ :) 我希望每个动画循环在重复之前，它会在动画再次开始之前停留在最后一个位置 10 秒，

标签： javascript jquery css animation

【解决方案1】：

没有尝试过animate.css，虽然应该可以使用现有的css，通过将animation-delay调整为10s，animation-direction调整为alternate，animation-fill-mode调整为forwards

.motext {
  animation-name: x;
  animation-duration: 20s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  width: 90%;
  max-width: 1170px;
  margin: auto;
  text-align: right;
  position: relative;
  color: blue;
}
@keyframes x {
  0% {
    color: blue;
  }
  100% {
    color: red;
  }
}

&lt;h1 class="motext animated fadeInDownBig"&gt;THINK QUALITY. THINK LIFELINE.&lt;/h1&gt;

【讨论】：