css - 如何减慢动画之间的时间？

Question

我正在尝试减慢周期中动画之间的时间。

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

    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/

Answer 1

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

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

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

here is an animation-delay property, but that won't help us here. That delays the start of the animation, but after it's started it runs continuously.

因此，与 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