动画延迟没有在CSS上工作

Question

在下面提供的代码段中，animation-delay属性无效。我的话渐渐渐渐消失了，所以动画很有效，但我希望这些字母可以在不同的时间出现。

代码段：

.title {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
}
.position {
  position: absolute;
  top: 500px;
  left: 100px;
}
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in span:nth-child(1) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(2) {
  animation-delay: 1200ms;
}
.fade-in span:nth-child(3) {
  animation-delay: 800ms;
}
.fade-in span:nth-child(4) {
  animation-delay: 300ms;
}
.fade-in span:nth-child(5) {
  -webkit-animation-delay: 700ms;
}
.fade-in span:nth-child(6) {
  -webkit-animation-delay: 600ms;
}
.fade-in span:nth-child(7) {
  -webkit-animation-delay: 400ms;
}
.fade-in span:nth-child(8) {
  -webkit-animation-delay: 900ms;
}
.fade-in span:nth-child(9) {
  -webkit-animation-delay: 700ms;
}

<div class="fade-in title position">
  <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>T</span><span>I</span><span>O</span><span>N</span>
</div>

有几件事要说。我正在测试safari，但由于某种原因它没有-webkit-就可以了，虽然我读到了你需要的地方。我是相当新的，所以不确定，但以防万一我把它留在我的一些子元素上来测试它不是问题。它无论如何都不起作用。需要注意的是，我已经尝试用属性颜色替换整个语句，如下所示：

.fade-in span:nth-child(1)  { color:red; }
.fade-in span:nth-child(2)  { color: green; }

并且这些字母以不同的颜色进入，所以我到达了我的孩子元素，但由于某种原因，延迟不起作用。我在伪造什么？谢谢你的时间。

Answer 1

您应该淡化span，而不是div，因此我将规则.fade-in更改为.fade-in span，将opacity更改为0，以便它们开始隐藏并添加animation-fill-mode: forwards以便它们保持可见

＆＃13;

＆＃13;

.title {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
}
.position {
  position: absolute;
  top: 100px;
  left: 100px;
}
.fade-in span {
  opacity: 0;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in span:nth-child(1) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(2) {
  animation-delay: 1200ms;
}
.fade-in span:nth-child(3) {
  animation-delay: 800ms;
}
.fade-in span:nth-child(4) {
  animation-delay: 300ms;
}
.fade-in span:nth-child(5) {
  -webkit-animation-delay: 700ms;
}
.fade-in span:nth-child(6) {
  -webkit-animation-delay: 600ms;
}
.fade-in span:nth-child(7) {
  -webkit-animation-delay: 400ms;
}
.fade-in span:nth-child(8) {
  -webkit-animation-delay: 900ms;
}
.fade-in span:nth-child(9) {
  -webkit-animation-delay: 700ms;
}

＆＃13;

<div class="fade-in title position">
  <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>T</span><span>I</span><span>O</span><span>N</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么我的动画延迟不起作用？

你的选择器错了。

变化：

.fade-in {
      opacity: 1;
      animation-name: fadeInOpacity;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
      animation-duration: 2s;
}

对此（使用animation简写来减少代码）：

.fade-in span{
      opacity: 0; /* Initially hide letter */
      animation: fadeInOpacity 2s 1 ease-in forwards;
}

注意如何使用键值forwards。这是animation-fill-mode。

  

转发目标将保留最后设置的计算值   执行期间遇到的关键帧。遇到的最后一个关键帧   取决于动画方向的值和   动画迭代计数：

代码段：

＆＃13;

＆＃13;

.title {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
}
.position {
  position: absolute;
  top: 100px;
  left: 100px;
}
.fade-in span {
  opacity: 0;
  animation: fadeInOpacity 2s 1 ease-in forwards;
}
@keyframes fadeInOpacity {
  100% {
    opacity: 1;
  }
}
.fade-in span:nth-child(1) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(2) {
  animation-delay: 1200ms;
}
.fade-in span:nth-child(3) {
  animation-delay: 800ms;
}
.fade-in span:nth-child(4) {
  animation-delay: 300ms;
}
.fade-in span:nth-child(5) {
  animation-delay: 700ms;
}
.fade-in span:nth-child(6) {
  animation-delay: 600ms;
}
.fade-in span:nth-child(7) {
  animation-delay: 400ms;
}
.fade-in span:nth-child(8) {
  animation-delay: 900ms;
}
.fade-in span:nth-child(9) {
  animation-delay: 700ms;
}

＆＃13;

<div class="fade-in title position">
  <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>T</span><span>I</span><span>O</span><span>N</span>
</div>

＆＃13;

＆＃13;

＆＃13;

我需要在animation媒体资源中使用vendor prefixes吗？

这取决于您需要的浏览器支持。如果您打算使用它，请始终声明不带 前缀的属性。

  .fade-in span{
          opacity: 1;
          -webkit-animation: fadeInOpacity 2s 1 ease-in forwards;
          animation: fadeInOpacity 2s 1 ease-in forwards;
    }

这是一个非常好的工具。 Autoprefixer CSS online

备注：

根据Animation spec：

  

如果未指定'0％'或'from'关键帧，则为用户代理   使用属性的计算值构造“0％”关键帧   动画。如果未指定'100％'或'to'关键帧，则   用户代理使用计算的值构造“100％”关键帧   被动画的属性。

这意味着无需在选择器和动画中声明属性两次。可以减少代码，下面是一个例子。

此：

.fade-in span{
      opacity: 0;
      animation: fadeInOpacity 2s 1 ease-in forwards;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

与：

相同

.fade-in span{
      opacity: 0;
      animation: fadeInOpacity 2s 1 ease-in forwards;
}

@keyframes fadeInOpacity {
  100% {
    opacity: 1;
  }
}

不要重复自己（DRY）。

建议：

如果animation-delay值是随机的，我强烈建议您使用Javascript。

这有助于使代码更易于维护。

我不久前做了类似的事情，如果您有兴趣，我会引导您完成：

定义标记：

<p id="text">
  Any word or sentence can be here, without wrapping each letter in a span manually.
</p>

我们想做两件事：

1. 将<span>标记中的每个单词换行，以便能够单独操作它。
2. 在包含字母的每个animation-delay元素上指定不同的<span>。

第1步：

让我们创建一个带有元素的JS函数，我们希望将每个字母包装起来作为参数：

function letterWrap(el) {}

在这个函数中，我们首先从我们用id="text"顶部定义的元素中获取文本并分隔每个字母。为此，我们将使用Node.textContent，trim()和split()。

el.textContent.trim().split(''); 
/* Gets element's text, removes whitespace, then separates each letter. */

＆＃13;
＆＃13;
function letterWrap(el) {
  console.log(el.textContent.trim().split(''));
};

var text = document.getElementById("text");
letterWrap(text);
＆＃13;
<p id="text">
  Animation text goes here.
</p>
＆＃13;
＆＃13;
＆＃13;

如您所见，split()返回一个数组。然后我们使用map()方法：

  

为数组中的每个元素提供一次回调函数   order，并从结果中构造一个新数组。

使用innerHTML和我们到目前为止，我们可以将每个字母附加到<p>容器中。在此示例中，我们将使用类.letter设置每个<span>标记的样式。

 function letterWrap(el) {
              el.innerHTML = el.textContent.split('').map(function(letter) {
                return '<span class=letter>' + letter + '</span>';
              }).join('');
            };

＆＃13;
＆＃13;
            function letterWrap(el) {
              el.innerHTML = el.textContent.split('').map(function(letter) {
                return '<span class=letter>' + letter + '</span>';
              }).join('');
            };

            var text = document.getElementById("text");
            letterWrap(text);
＆＃13;
.letter:nth-child(odd) {
  color: chartreuse;
}
＆＃13;
<p id="text">
  Animation
</p>
＆＃13;
＆＃13;
＆＃13;

完成第1步。我们现在可以转到第二步，在每个字母上分配一个随机animation-delay并设置动画本身。

第2步：

首先，让我们选择我们分配的类letter的所有元素，这将为我们提供一个我们可以迭代的列表。

 var letters = document.getElementsByClassName('letter');
          for (var i = 0; i < letters.length; i++) {
            //Animation delay logic goes here.
          }

animation-delay逻辑：

对于每个字母，将索引乘以1到100之间的随机数，以毫秒为单位返回此数字并将其分配给此元素的animation-delay属性。

 letters.item(i).style.animationDelay = i * Math.floor((Math.random() * 100) + 1) + 'ms';

我们总结一下并最终得到这个：

 function letterWrap(el) {
          el.innerHTML = el.textContent.split('').map(function(letter) {
            return '<span class=letter>' + letter + '</span>';
          }).join('');
          var letters = document.getElementsByClassName('letter');
          for (var i = 0; i < letters.length; i++) {
            letters.item(i).style.animationDelay = i * Math.floor((Math.random() * 100) + 1) + 'ms';
          }
        };

让我们添加一些样式：

/* Layout */
body,
p {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Letter animations */
#text {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
  text-transform: uppercase;
}

@keyframes fadeInOpacity {
  to {
    opacity: 1;
  }
}

.letter {
  opacity: 0;
  animation: fadeInOpacity 2s 1 ease-in forwards;
}

我们已经完成了！

代码段：

＆＃13;
＆＃13;
function letterWrap(el) {
  el.innerHTML = el.textContent.split('').map(function(letter) {
    return '<span class=letter>' + letter + '</span>';
  }).join('');
  var letters = document.getElementsByClassName('letter');
  for (var i = 0; i < letters.length; i++) {
    letters.item(i).style.animationDelay = i * Math.floor((Math.random() * 100) + 1) + 'ms';
  }
};

var text = document.getElementById("text");
letterWrap(text);
＆＃13;
body,
p {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#text {
  font-size: 4.5em;
  letter-spacing: 1.5px;
  color: black;
  text-transform: uppercase;
}
@keyframes fadeInOpacity {
  to {
    opacity: 1;
  }
}
.letter {
  opacity: 0;
  animation: fadeInOpacity 2s 1 ease-in forwards;
}
＆＃13;
<p id="text">
  Animation
</p>
＆＃13;
＆＃13;
＆＃13;

jsFiddle

游乐场

每次要使用它时，只需选择元素并调用此函数，而不是定义大量:nth-child伪类选择器。

＆＃13;
＆＃13;
            function letterWrap(el) {
              el.innerHTML = el.textContent.split('').map(function(letter) {
                return '<span class=letter>' + letter + '</span>';
              }).join('');
              var letters = document.getElementsByClassName('letter');
              for (var i = 0; i < letters.length; i++) {
                letters.item(i).style.animationDelay = i * Math.floor((Math.random() * 100) + 1) + 'ms';
              }
            };

            var a = document.getElementById("a"),
              b = document.getElementById("b"),
              c = document.getElementById("c"),
              d = document.getElementById("d");
            letterWrap(a);
            letterWrap(b);
            letterWrap(c);
            letterWrap(d);
＆＃13;
p {
  text-transform: uppercase;
}
@keyframes fadeInOpacity {
  to {
    opacity: 1;
  }
}
.letter {
  opacity: 0;
  animation: fadeInOpacity 2s 1 ease-in forwards;
}
#a {
  font-size: 1em;
  color: tomato;
}
#b {
  font-size: 1.2em;
  color: chartreuse;
}
#c {
  font-size: .8em;
  color: dodgerblue;
}
#d {
  font-size: 2em;
  color: gold;
}
＆＃13;
<p id="a">
  Animation
</p>

<p id="b">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

<p id="c">
  Sed a purus lacinia, condimentum nisi aliquam, porta ex. Proin sed nunc dignissim ex hendrerit iaculis. Donec ut dui pulvinar felis vehicula varius ac sed metus. Integer bibendum purus et ipsum feugiat, vitae luctus ante lobortis.
</p>

<p id="d">
  abcd
</p>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您已按错误的顺序指定了-webkit个版本。 -webkit-animation替换您刚刚设置的延迟规则。颠倒顺序，以便延迟到来。

-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;

如果您始终设置单个属性，则可以避免这些问题：

-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;

别忘了也设置：

opacity: 0;

否则文本将在动画开始前可见，并且：

-webkit-animation-fill-mode: forwards;