Question

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

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

我的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;
  }
}

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

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

1 个答案: