CSS简单加载动画不是迭代的

Question

我有一个简单的基于CSS的加载动画，它应该与infinite一起迭代。但是，动画只运行一次并停止。我肯定错过了一些微不足道的东西，却无法发现错误。

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

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

非常感谢任何帮助。

这是一个片段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我建议在任何可见性动画中使用不透明度，检查下面的代码是否具有不透明度..因为动画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>