html - 我试过调用我的 CSS 动画，但它不起作用

Question

我通过名为“dots”的 CSS 创建了一个关键帧动画。我是 CSS 动画的新手，但我尝试通过简写语法 ('animation:____') 调用点动画。基本上，我正在尝试创建一个加载点屏幕，其中每个点都会逐渐变大并移动一点。这是一个类似的例子：https ://www.cssscript.com/three-dots-loading-spinners-css/

body {
  background-color: #AEADF0;
}

.container {
  padding: 150px;
  margin: auto;
}

.dot-container {
  text-align: center;
  padding: 150px;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #FBF5F3;
  border-radius: 50%;
  display: inline-block;
  animation: dots 3s infinite;
}

@keyframe dots {
  0% {transform: translateY(0px); transform: scaleY(1);}
  50% {transform: translateY(-10px); transform: scaleY(1.5);}
  100% {transform: translateY(0px); transform: scaleY(1);}
}

/*How to center the dots*/
/*How to transition the dots into the web page*/
/*Animation not working*/

<div class = "container">
  <div class = "dot-container">
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
  </div>
</div>

标签： htmlcss