如何在HTML文件中使用CSS设置动画，修复加载圆点keyframes动画异常问题

问题出在缺失CSS动画必填的animation-duration属性，该属性用于定义单个动画周期的时长，默认值为0，因此没有可见的动画效果。

修复方式：在.loading span的样式规则中添加animation-duration配置即可，推荐设置为1.6s，和三个圆点的0.4s、0.8s延迟适配，动画过渡更自然。

修复后的完整代码如下：

<div class="footer-btm">
  Thanks for watching
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<style>
.loading span{
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #ffd957;
  border-radius: 50%;
  display: inline-block;
  animation-name: dots;
  animation-duration: 1.6s; /* 新增的动画时长配置 */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.loading span:nth-child(2){
  background-color: #57ffa0;
  animation-delay: 0.4s;

}
.loading span:nth-child(3){
  background-color: #ff8b57;
  animation-delay: 0.8s;
}
@keyframes dots{
  50%{
    opacity: 0;
    transform: scale(0.7) translateY(10px);
  }
}
</style>

内容的提问来源于stack exchange，提问作者user16784870