加载器动画关键帧不工作 CSS

问题描述

我正在尝试为网站创建加载器动画，但由于某种原因它不起作用。知道我在 css 上做错了什么吗？

HTML 部分

  <footer>
    <div class="container has-text-centered">
      <div class="loadingdots">
        <span class="dots has-text-centered"> &middot  </span>
        <span class="dots has-text-centered"> &middot </span>
        <span class="dots has-text-centered"> &middot </span>
        
      </div>
    </div>
  </footer>

css 部分

.loadingdots {
    opacity: 1;
    bottom: 50px;
    transition: opacity 0.3s ease-in;
  }

.dots{
    font-size:80px;
    color: #1E1E1E;
    height: 10px;
    animation: bounce 0.5s ease-in infinite;
    padding: 10px;
}

.dots:nth-of-type(2) {
    animation-delay: 0.1s;
  }
  
.dots:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes bounce {
    0%,100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-10px);
    }
}

非常感谢。目前，这就是我页面上的内容。 Website look with the dots for loading...

感谢您的帮助！ 干杯！

解决方法

给 span 元素 array([[1,1],[1,**1**],[**1**,[0,0],0]])

display: inline-block;

.loadingdots {
    opacity: 1;
    bottom: 50px;
    transition: opacity 0.3s ease-in;
  }

.dots{
    font-size:80px;
    color: #1E1E1E;
    height: 10px;
    animation: bounce 0.5s ease-in infinite;
    padding: 10px;
    /* ADDED */
    display: inline-block;
}

.dots:nth-of-type(2) {
    animation-delay: 0.1s;
  }
  
.dots:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes bounce {
    0%,100% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-10px);
    }
}