如何停止此 css 动画中的闪烁？答案

【问题标题】：How do I stop the flickering in this css animation?如何停止此 css 动画中的闪烁？
【发布时间】：2015-03-11 14:33:29
【问题描述】：

css 动画是http://codepen.io/pksunkara/pen/gbejPv。它的灵感来自http://codepen.io/fbrz/pen/ljuJn。

编辑：如何停止该 codepen 中的第一帧跳转？

我的 codepen 的 HTML 如下所示。

<div id="loader">
  <div id="loaderout" class="box">
    <div id="loaderin" class="box"></div>
    <div class="ballbox box">
      <div class="first-1 ball"></div>
      <div class="second-1 ball"></div>
    </div>
  </div>
  <div class="ballbox box">
    <div class="first-2 ball"></div>
    <div class="second-2 ball"></div>
  </div>
</div>

我的 codepen 的 CSS 如下：

body {
  background: #e9e9e9;
}

#loader {
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.box {
  width: 80px;
  height: 80px;
}

#loaderout + .ballbox {
  animation: rotate-1 1.5s linear infinite;
}

#loaderin + .ballbox {
  animation: rotate-2 1.5s ease-in-out infinite; 
}

#loaderout {
  animation: rotate-1 1.5s linear infinite;
  clip: rect(0, 80px, 80px, 40px);
  position: absolute;
}

@keyframes rotate-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(220deg);
  }
}

@keyframes rotate-2 {
  0% {
    transform: rotate(-140deg);
  }
  100% {
    transform: rotate(140deg);
  }
}

#loaderin {
  animation: rotate-2 1.5s ease-in-out infinite,
             animate 1.5s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: absolute;
}

@keyframes animate {
  0% {
    box-shadow: inset #e04e38 0 0 0 16px;
  }
  50% {
    box-shadow: inset #e04e38 0 0 0 2px;
  }
  100% {
    box-shadow: inset #e04e38 0 0 0 16px;
  }
}

.ball {
  position: absolute;
  background: #e04e38;
  border-radius: 50%;
}

.first-1 {
  animation: borderball 1.5s ease-in-out infinite;
}

.second-1 {
  animation: borderball 1.5s ease-in-out infinite;
  bottom: 0;
}

.first-2 {
  animation: borderball 1.5s ease-in-out infinite,
             firstball 1.5s ease-in-out infinite;
}

.second-2 {
  animation: borderball 1.5s ease-in-out infinite,
             secondball 1.5s ease-in-out infinite;
  bottom: 0;
  visibility: hidden;
}

@keyframes firstball {
  1%, 49% {
    visibility: visible;
  }
  0%, 50%, 100% {
    visibility: hidden;
  }
}

@keyframes secondball {
  0%, 50%, 100% {
    visibility: hidden;
  }
  51%, 99% {
    visibility: visible;
  }
}

@keyframes borderball {
  0%, 100% {
    width: 16px;
    height: 16px;
    left: 32px;
  }
  50% {
    width: 2px;
    height: 2px;
    left: 38px;
  }
}

【问题讨论】：

你有什么浏览器和系统？它对我来说根本没有闪烁。我在 Mac 和 PC 上进行了测试，都在 Chrome 中。还是您的意思是“如何停止第一帧跳转”？我看到第一帧（或最后一帧）跳转到一个居中的点，但后来我回去发现它又可以正常工作了
我在 Mac 上使用 Safari。是的，我的意思是第一帧跳转。
它只是偶尔发生吗？还是你经常看到它？我再也看不到它了，只看到过一次。另外，它在示例中是这样做的吗？
我每 3 次看到大约 2 次。我在不同的电脑上测试过。我正在努力使过渡顺利。

标签： html css css-animations

【解决方案1】：

我通过将一些特定的 CSS 规则更改为以下内容来修复它。

.second-2 {
  animation: borderball 1.5s ease-in-out infinite,
             secondball 1.5s ease-in-out infinite;
  bottom: 0;
  opacity: 0;
}

@keyframes firstball {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes secondball {
  0%, 50% {
    opacity: 0;
  }
  51%, 100% {
    opacity: 1;
  }
}

【讨论】：