css - CSS简单加载动画不会迭代

我有一个基于CSS的简单加载动画，应使用infinite进行迭代。但是，动画只能运行一次并停止。我肯定会错过一些琐碎的事情，但无法发现错误。

一个相关的问题，为了缩短CSS，是否可以将所有供应商特定的选择器加入一个块，如以下示例所示？

@keyframes loading-dots,
@-webkit-keyframes loading-dots,
@-[other vendors...]
 {
  0%,
  100% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

任何帮助是极大的赞赏。

这是一个片段：

.loading-dots span {
  display: inline-block;
  height: 9px;
  width: 9px;
  background: #abb3b8;
  -webkit-animation: loading-dots 0.8s infinite;
  -moz-animation: loading-dots 0.8s infinite;
  -ms-animation: loading-dots 0.8s infinite;
  animation: loading-dots 0.8s infinite;
}

.loading-dots span:nth-child(2) {
  visibility: hidden;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  visibility: hidden;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@keyframes loading-dots {
  0%,
  100% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

@-webkit-keyframes loading-dots {
  0%,
  100% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

@-moz-keyframes loading-dots {
  0%,
  100% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

@-ms-keyframes loading-dots {
  0%,
  100% {
    visibility: hidden;
  }
  50% {
    visibility: visible;
  }
}

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

最佳答案

我建议将不透明度与任何可见性动画一起使用，并使用不透明度..检查以下代码，因为对visibility或display进行动画处理不是一个好主意，因为它们是无法动画的1/0值

    .loading-dots span {
  display: inline-block;
  opacity:0;
  height: 9px;
  width: 9px;
  background: #abb3b8;
  -webkit-animation: loading-dots 0.8s infinite;
  -moz-animation: loading-dots 0.8s infinite;
  -ms-animation: loading-dots 0.8s infinite;
  animation: loading-dots 0.8s infinite;
}

.loading-dots span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@keyframes loading-dots {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes loading-dots {
  0% {
   opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes loading-dots {
  0%{
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes loading-dots {
  0% {
    opacity:0;
  },
  100% {
    opacity:1;
  }
}

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

关于css - CSS简单加载动画不会迭代，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47143147/