I've tried calling my CSS animation but it doesn't work

Question

I created a keyframe animation through CSS called 'dots'. I'm new to CSS animation but I tried calling the dots animation through the shorthand syntax ('animation:____'). Basically, I'm trying to create a loading dot screen, where each dot get incrementally larger and moves a little bit. Here's a similar example: 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*/

I've tried calling my CSS animation but it doesn't work

0 Answers