加载器动画关键帧不起作用 CSS答案

【问题标题】：Loader animation keyframe not working CSS加载器动画关键帧不起作用 CSS
【发布时间】：2021-01-29 20:46:16
【问题描述】：

我正在尝试为网站创建加载器动画，但由于某种原因它无法正常工作。知道我在 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...

感谢您的帮助！干杯！

【问题讨论】：

标签： css animation css-animations loading loader

【解决方案1】：

给出span元素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);
    }
}

  <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>

【讨论】：