如何修复 css 关键帧动画的闪烁

Question

我试图通过无限关键帧动画和动画延迟属性来错开三个框的不透明度（淡入淡出）。

我遇到了一些意想不到的行为，随着第三个框逐渐消失，它在动画再次开始之前突然微弱地重新出现 ("flickers")。我在浏览器中遇到过这种情况。

如果可能，我想使用伪元素，是否有针对此关键帧错误的已知修复程序？

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

Answer 1

他们闪烁的原因是因为你在他们的parent上设置了动画，child。

并且由于它的动画没有延迟，所以它在 children 之前开始，但是一旦延迟过去就会被它们覆盖，因此可以看到快速闪烁。

避免将来出现此问题的最佳方法是从 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>

如何修复 css 关键帧动画的闪烁

How to fix flickering from css keyframe animation

html

css

sass

keyframe

css-animations