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

【问题标题】：How to fix flickering from css keyframe animation如何修复css关键帧动画的闪烁
【发布时间】：2017-07-08 01:06:06
【问题描述】：

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

我得到了一些意想不到的行为，随着第三个框逐渐消失，在动画再次开始之前它突然隐约重新出现（“闪烁”）。我正在跨浏览器遇到这种情况。

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

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

【问题讨论】：

我研究了这两种变体，正如我所见，它们的行为相同。如果您的非伪版本没有，您也需要发布该代码示例......这是我的jsfiddle.net/gfrd06te/1
你是对的，我错了......你看到第三个元素的闪烁了吗？我在你的例子中也看到了。
它实际上在所有这些上，尽管它在第 3 天最明显，这是可以理解的，因为它有最长的延迟。我很快就会看看，看看如何避免这种情况

标签： html css sass css-animations keyframe

【解决方案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>

【讨论】：

伟大的，洞察力。现在是有道理的。谢谢！