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/

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

因此，他的建议与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

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

1 个答案: