Question

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

我得到了一些意想不到的行为，因为第三个框消失了，它在动画再次开始之前突然重新出现（＆＃34;闪烁＆＃34;）。我在浏览器中遇到过这种情况。

我想尽可能使用伪元素，这个关键帧错误是否已知？

HTML

td

SCSS

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

JS Fiddle

Answer 1

他们闪烁的原因是因为您在其父级child上设置了动画。

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

避免任何未来问题的最佳方法是从child

中移除动画

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: