Question

我正在研究以下内容：

这是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秒钟，这样有人可以阅读它并淡出到下一段。

我使用了持续时间和延迟，似乎并没有按照我想要的方式工作。任何帮助都会很棒。

Answer 1

这种方法非常简单，但你需要按照Paulie_D评论中提到的那样进行数学运算。我会选择是否使用它。就个人而言，我没有看到这种方法有任何问题，或者任何复杂性都没有提供。要淡入/淡出的元素是静态的。

整体方法如下：

我们有3个元素/段落，为了示例目的，我将使它们在前3秒内淡入，在接下来的10秒内保持原样并在最后消失。因此，对于每个元素，我们在动画时间内总共需要16秒。
当第一个元素完成动画并且第二个或第三个元素被动画化时，前面的元素应保持最终状态（即淡出）。为实现这一目标，需要做以下事情：
- 为所有元素设置animation-duration，使其成为所有元素的动画时间总和。这里将是3 * 16s = 48s。
- 设置keyframes，使得每个元素在总持续时间的32s内保持空闲，因为在此32s间隙期间，其他两个元素将执行动画。这是通过在动画的总持续时间的33％内完成淡入，停留和淡出来实现的。
- 将第二个元素的animation-delay设置为16s（因为它必须在第一个元素完成后启动），第三个元素的32s设置为keyframes（因为前两个元素应该完成）。
来到33%规则本身，正如我之前所说，一个元素的整个动画应该在整个持续时间的6.25%内完成。因此，在3s（大约26.75%标记）处，我们将元素淡入然后直到13s（直到opacity: 1标记），我们将其置于{{1} }然后在33%（即16s标记）我们完全淡出它。

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

此示例的基本CSS代码如下所示：

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

当显示元素时（通过切换到可见类），我们希望可见性：可见立即启动，因此可以仅转换不透明度属性。当隐藏元素时（通过切换到隐藏类），我们想要延迟visibility：hidden声明，这样我们就可以先看到淡出过渡。我们通过声明可见性属性的转换来做到这一点，持续时间为0并且延迟。

在淡出过渡结束时，我们想要从流中删除隐藏元素，这样它就不会在页面中间留下空白区域。可悲的是，我们在这里没有太多选择：

display：none不起作用，因为它会立即应用，并且试图像我们对可见性一样延迟它会起作用;
position：absolute具有完全相同的问题;
这不理想，但我们可以使用margin-top（它可以转换和因此延迟了。

为了使用margin-top来隐藏元素，我们需要有一个稍微丰富的HTML结构：

<div class="visible">
  <div>…</div>
</div>

我们的CSS代码变得更加复杂：

.visible,
.hidden {
  overflow: hidden;
  /* This container should not have padding, borders, etc. */
}
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
  /* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

延迟无限淡入＆amp; CSS3动画

2 个答案: