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

EN

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