如何减慢动画之间的时间？答案

【问题标题】：How can I slow down the time between animations?如何减慢动画之间的时间？
【发布时间】：2019-07-18 07:35:31
【问题描述】：

我正在尝试减慢循环中动画之间的时间。

我尝试增加关键帧的动画时间，但没有奏效。

    span {
     animation: rotateWordsFirst 15s linear infinite 0s;

      &:nth-child(2) { 
        animation-delay: 5s; 
        }

        &:nth-child(3) { 
        animation-delay: 10s; 
             }

        &:nth-child(4) { 
        animation-delay: 15s; 
        }
    }

@keyframes rotateWordsFirst {
     0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

我希望在动画之间让文本在更长的时间内保持可见，但我所做的一切似乎都让我的动画周期中断。

我一直在使用本教程： http://www.css3transition.com/rotating-words-css-animations/

【问题讨论】：

添加一个 SCSS 标记或您正在使用的任何后处理，如果您将编译后的 CSS 发布给我们这些刚了解 CSS 的人会有所帮助。
你能把rotateWordsFirst 动画添加到你的css吗？
向我们展示您的关键帧
@ChrisW。刚刚添加了它们
在translateY通过调整关键帧退出之前提供更多时间；例如;分别将 17% 和 20% 更改为 75% 和 77%，然后您的动画延迟将按照我认为您的预期运行（前提是我正确理解您的意图），干杯！

标签： css animation

【解决方案1】：

在制作汽车、飞机和火车同时移动的半复杂城市动画时，我偶然发现了一个类似的问题。

然后我看到了 Chris Coyier 的这篇文章：

https://css-tricks.com/css-keyframe-animation-delay-iterations/

这里是一个动画延迟属性，但这对我们没有帮助。这会延迟动画的开始，但在开始后它会继续运行。

因此，与 ChrisW 试图解释的类似，他的建议是将延迟包含在您的关键帧逻辑中：

示例

我的原始动画持续 4 秒，我希望它无限运行，但最后延迟 1 秒。这意味着我必须将延迟添加到总动画时间中，在这种情况下，4s + 1s = 5s。应用以下更改：

.your-element {
  animation: name-of-your-animation 5s infinite;
}

现在，对于关键帧，让我们假设我们有这样的东西：

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  25% {
    // do something
  }
  50% {
    //do something
  }
  75% {
    //do something
  }
  100% {
   // do something
  }
}

我们需要考虑到最后的 1 秒延迟，所以我们的动画必须在 5 秒中的 4 秒内发生，也就是说，动画的 4/5 或 100% 的 80%：

@keyframes name-of-your-animation {
  0% {
    //do something
  }
  50% {
    // do something
    opacity:0.5;
  }
  /* Finish changes by here, as an example, let's think of moving opacity from 0 to 1, gradually or not */
  79% {
    opacity:1;
  }
  /* Between 80% and 100%, nothing changes, so the 'end state' is repeated */
  80%, 100% {
   // do something
   opacity:1;
  }
}

试一试，如果您需要其他帮助，请告诉我们。干杯 G

【讨论】：