Question

我正在为列表项目制作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

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

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

如何使用CSS3关键帧动画对序列中的列表项进行动画处理

2 个答案: