如何修复CSS关键帧动画闪烁问题

Question

我正在尝试通过无限关键帧动画和animation-delay属性，使三个框的透明度（淡入淡出）错开。

不过，当第三个框淡出时，它会突然微弱地重新出现（"闪烁"），然后动画再次开始。我在各种浏览器中都遇到了这种情况。

如果可能，我想使用伪元素来解决这个问题，请问有没有已知的修复这个关键帧错误的方法？

HTML

<div class="container">
   <div class="child">  
   <div></div> 
    </div>
</div>

SCSS

.container {
     position: fixed;
     left: 150px;
     top: 50px;

.child {
     position: absolute;
     animation:mymove 1s infinite;

     &::before{
         display: block;
         position: absolute;
         width: 25px;
         height: 25px;
         background-color: red;
         content: "";
         right: 40px;
         animation: inherit;
         animation-delay: .15s;
    }

    div {
        width: 25px;
        height: 25px;
        background-color: red;
        animation: inherit;
        animation-delay: .30s;
     }

     &::after{
         display: block;
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: red;
        content: "";
        left: 40px;
        bottom: 0px;
        animation: inherit;
        animation-delay: .45s;
       }
   }
}

 @keyframes mymove {
      0% {
      opacity: 1;
    }

      100% {
        opacity: 0;
  }
}

JS Fiddle

- 12th

---

我研究了两个变量，发现它们的行为是相同的。如果你的非伪代码版本不同，请也发布那段代码示例...这是我的 https://jsfiddle.net/gfrd06te/1/ - Asons

你说得对，我错了... 你能看到第三个元素闪烁吗？在你的例子中我也看到了。 - 12th

它实际上出现在所有的地方，尽管在第3个上最明显，这是可以理解的，因为它具有最长的延迟。我会很快看一下，看看如何避免这种情况。 - Asons

Answer 1

它们闪烁的原因是因为您在它们的父元素上设置了动画，即child。

由于其动画没有延迟，因此它会在子元素之前开始，但一旦子元素的延迟时间过去，它们就会覆盖它，因此我们可以看到一个快速的闪光。

避免将来出现任何问题的最佳方法是从child中删除动画。

.container {
  position: fixed;
  left: 150px;
  top: 50px;
}

.container .child {
  position: absolute;
}

.container .child::before {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  content: "";
  right: 40px;
  animation: mymove 1s infinite;
  animation-delay: 0.15s;
}

.container .child div {
  width: 25px;
  height: 25px;
  background-color: red;
  animation: mymove 1s infinite;
  animation-delay: 0.3s;
}

.container .child::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  content: "";
  left: 40px;
  bottom: 0px;
  animation: mymove 1s infinite;
  animation-delay: 0.45s;
}

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

<div class="container">
  <div class="child">
    <div></div>
  </div>
</div>

- Asons

---

太好了，有了深刻的见解，现在一切都清晰明了。谢谢！ - 12th