动画延迟不适用于 css

animation-delay not working on css

在下面提供的代码段中，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; }

字母确实以不同的颜色出现，所以我到达了我的子元素，但由于某种原因，延迟不起作用。我忘记了什么？感谢您的宝贵时间。

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

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

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

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

您的 selector 是错误的。

变化：

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

为此（使用animation shorthand 来减少代码）：

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

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

forwards The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:

代码片段：

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

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

我需要在 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:

If a ‘0%’ or ‘from’ keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or ‘to’ keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated.

这意味着没有必要在 select 或动画中两次声明 属性。代码可以减少，下面是一个例子。

这个：

.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. 为每个包含字母的 <span> 元素分配一个不同的 animation-delay。

第 1 步：

让我们用元素创建一个 JS 函数，我们希望每个字母都被包装，作为参数：

function letterWrap(el) {}

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

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


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

var text = document.getElementById("text");
letterWrap(text);

<p id="text">
  Animation text goes here.
</p>

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

provide a callback function once for each element in an array, in order, and constructs a new array from the results.

使用 innerHTML 和我们目前所拥有的，我们可以将每个字母附加到 <p> 容器中。在这个例子中，我们将使用 class .letter 来设置每个 <span> 标签的样式。

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


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

.letter:nth-child(odd) {
  color: chartreuse;
}

<p id="text">
  Animation
</p>

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

第 2 步：

首先，让 select 所有具有我们分配的 class letter 的元素，这将得到一个我们可以迭代的列表。

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

animation-delay逻辑：

对于每个字母，将索引乘以 1 到 100 之间的随机数，return 这个数字（以毫秒为单位）并将其分配给这个元素的 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;
}

大功告成！

代码片段：

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

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

<p id="text">
  Animation
</p>

jsFiddle

游乐场

每次你想使用这个时，你只需 select 元素并调用这个函数而不是定义很多 :nth-child 伪 class select 或。 

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

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

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

您指定的 -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;