延迟无限衰落&出CSS3动画 [英] Delay in infinite fade in & out CSS3 animation

问题描述

我正在进行下列工作：

代码

以下是HTML：

<div id="animation">
  <ul>
    <li>this is</li>
    <li>CSS3 looped</li>
    <li>animation</li>
   </ul>
 </div>

这是CSS：

#animation {
    height: 100%;
    width: 100%;
}
#animation ul {
    position: relative;
    text-align: center;
    width: 100%;
}
#animation li {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) {
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate;
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation:fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) {
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) {
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate;
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

我刚接触CSS3，粘贴段落而不是几个字。我的问题是，当文字淡入时，你如何保持它在屏幕上例如10秒，以便有人可以读它，并淡出到下一段。

I am new to CSS3 and with the code I want to stick paragraphs in instead of a couple of words. My question is, when the text fades in, how can you keep it on the screen for eg 10 seconds so someone can read it and the fade out into the next paragraph.

我使用持续时间和延迟，不真的似乎工作的方式我想要的。任何帮助将是巨大的。

I have used duration and delay, doesn't really seem to work the way I wanted. Any help will be great.

推荐答案

这种方法非常简单，但你需要做数学，如Paulie_D的评论。我会留下选择是否使用它还是不使用你。就个人而言，我没有看到任何错误的这种方法或任何复杂性，如果没有。要淡入/淡出的元素是静态的。

The approach is really simple but you would need to do math as mentioned in Paulie_D's comment. I would leave the choice on whether to use it or not to you. Personally, I don't see anything wrong with this approach or any complexity provided the no. of elements to be faded in/out is static.

整体方法如下：

• 我们有3个元素/段落，并且为了示例的目的，我将使他们淡入的前3秒，保持原样在接下来的10秒，淡出的最后一个。因此，对于每个元素，我们在动画时间中总共需要16秒。



• 当第一个元素完成其动画并且第二个或第三个是动画时，应该保持最终状态（即淡出）。要实现这一点，需要完成以下操作：

• We have 3 elements/paragraphs and for the example purpose I am going to make them fade-in for the first 3 seconds, stay as-is for the next 10 seconds and fade out for the last. So, for each element we need a total of 16 seconds in animation time.

• While the first element has completed its animation and the second or third is being animated, the previous ones should hold the final state (that is faded out). To achieve this, the following need to be done:

• 设置 animation-duration 对于所有元素，它是所有元素的动画时间的总和。这里是3 * 16s = 48s 。


• 设置关键帧使得每个元素将在总持续时间的 32s 中保持空闲，因为在 32s 期间，其他两个元素将是做他们的动画。这是通过在动画的总持续时间的33％内完成淡入，淡出和淡出来实现的。


• 设置 animation-delay 的第二个元素为 16s （因为它必须在第一个元素完成后开始），第三个元素的 > 32s （因为前两个应完成）。

• Set the animation-duration for all elements such that it is the sum total of animation times for all elements. Here it would be 3*16s = 48s.
• Set the keyframes such that each element would remain idle for 32s of the total duration because during this 32s gap the other two elements would be doing their animation. This is achieved by completing the fade-in, the stay and the fade-out all together within 33% of the animation's total duration.
• Set animation-delay of second element to be 16s (because it has to start after the first one is completed) and that for the third to be 32s (because first two should complete).

#animation {
  height: 100%;
  width: 100%;
}
#animation ul {
  position: relative;
  text-align: center;
  width: 100%;
}
#animation li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  padding: 10px;
}
#animation li:nth-of-type(1) {
  animation: fadein 48s ease-in-out infinite;
}
#animation li:nth-of-type(2) {
  animation: fadein 48s ease-in-out 16s infinite;
}
#animation li:nth-of-type(3) {
  animation: fadein 48s ease-in-out 32s infinite;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  6.25% { /* 3s for fade in */
    opacity: 1;
  }
  26.75% { /* roughly 10s for stay as-is */
    opacity: 1;
  }
  33% { /* 3s for fade out */
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="animation">
  <ul>
    <li>This is</li>
    <li>CSS3 looped</li>
    <li>animation</li>
  </ul>
</div>

这篇关于延迟无限衰落&出CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！