如何使用 css3 关键帧动画为序列中的列表项设置动画答案

【问题标题】：How to animate the list item in a sequence using css3 keyframe animation如何使用 css3 关键帧动画为序列中的列表项设置动画
【发布时间】：2018-10-11 20:17:13
【问题描述】：

我正在为列表项制作 css3 动画，其中每个列表项应该以无限循环的正向顺序一个一个地动画。我尝试了一些技术，但可以达到效果。任何帮助，将不胜感激。

HTML

<ul>
  <li>content 1</li>
  <li>content 2</li>
  <li>content 3</li>
  <li>content 4</li>
</ul>

风格

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
  color: green;
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  box-sizing: border-box;
  animation: fade 1s ease-in-out infinite alternate;
}

li:nth-of(2) {
  animation-delay: 1s;
}
li:nth-of(3) {
  animation-delay: 2s;
}
li:nth-of(4) {
  animation-delay: 3s;
}
@keyframes fade {
  from {
    color: black;
    background-size: 0;
  }
  to {
    background-color: #1b385c;
    color: white;
  }
}

DEMO

【问题讨论】：

li:nth-of(2) - 什么？据我所知，没有 :nth-of 伪类/选择器。
演示已经编辑/更新。
您的动画持续时间为 1 秒，并且您将每个项目的开始时间再延迟一秒……尝试使用 2 秒的动画持续时间，看看这会如何改变整个事情。
这也无济于事fiddle@misorude
不，我的意思是将 all 的动画持续时间更改为延迟增量的两倍 - jsfiddle.net/6cz7ayjn/16

标签： html css css-animations

【解决方案1】：

您的动画关键帧是错误的，因为 100% 的动画不是您为该元素设置动画的时间，而是您为所有元素设置动画的时间（整个周期被重复）。因此，因为您有 4 个项目，所以您的动画需要：

            25%         50%         75%         100%
/* animation *************************************/
/************* animation *************************/
/************************* animation *************/
/************************************* animation */

这意味着：

 @keyframes fade {
  from {
    color: black;
  }
  12.5% { /* peak of animation */
    color: white;
    background-color: #1b385c;
  }
  25% { /* end of animation */
    color: black;
    background-color: gray;
  }
  to { 
    /* 75% stand still - same value as 25% and from */
  }
}

这里实际上不需要to。我只是把它放在那里，所以我可以评论它。您可以删除它。
animation 必须是：

animation: fade 4s linear infinite;

（我删除了替代：你没有倒车，因为它不是对称的。它是 25% 的动画，其余的 75% 仍然是。）看到它工作：

ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
  color: green;
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  box-sizing: border-box;
  animation: fade 4s linear infinite;
}

li:nth-of-type(2) {
  animation-delay: 1s;
}
li:nth-of-type(3) {
  animation-delay: 2s;
}
li:nth-of-type(4) {
  animation-delay: 3s;
}
 @keyframes fade {
  from {
    color: black;
  }
  12.5% {
    color: white;
    background-color: #1b385c;
  }
  25% {
    color: black;
    background-color: gray;
  }
}

<ul>
  <li>content 1</li>
  <li>content 2</li>
  <li>content 3</li>
  <li>content 4</li>
</ul>

【讨论】：

有什么办法可以增加我尝试过的每个动画之间的间隔并最终得到较慢的动画。fiddle
@benjamin：当然。如果您不希望它们重叠，只需将 4s 缩放到您想要的任何值：即：12s 并使用相同的因子缩放延迟。如果你想让动画重叠（第二个动画在第一个动画刚结束时开始，你可以增加12.5%和25%。记住下一个从25%开始。所以如果你让它们在@987654335达到峰值@ 并在 40% 结束，下一个将在当前一个峰值之后开始，因为它开始返回。示例：jsfiddle.net/websiter/6cz7ayjn/24

【解决方案2】：

使用此代码：

  <ul>
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
    <li>content 4</li>
  </ul>

CSS

    ul {
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
  }

  li {
    flex-basis: 50%;
    color: green;
    height: 100px;
    background-color: gray;
    border: 1px solid black;
    box-sizing: border-box;
    animation: fade 4s  infinite ;
    animation-delay: 0s;
    animation-timing-function: linear;
  }

  li:nth-of-type(2) {
    animation-delay: 1s;
  }
  li:nth-of-type(3) {
    animation-delay: 2s;
  }
  li:nth-of-type(4) {
    animation-delay: 3s;
  }
  @keyframes fade {
    0% {
      color: black;
    background-color: gray;
    }
    25% {
      background-color: #1b385c;
      color: white;
    }
    50% {
        background-color: gray;
      color: white;

    }
    100% {
        color: black;
        background-color: gray;
    }
  }

【讨论】：