我尝试调用CSS动画，但是它不起作用

Question

我通过称为“点”的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>