:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #42565d;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pagePurple);
}
ul {
  margin: 0;
  padding: 0;
  display: flex;
}
ul li {
  list-style: none;
  width: 30px;
  height: 30px;
  background-color: white;
  margin: 0 10px;
  border-radius: 50%;
  animation: jumping 0.5s linear 10;
}
@keyframes jumping {
  0% {transform: translateY(0);}
  50% {transform: translateY(-150px);}
  100% {transform: translateY(0);}  
}
ul li:nth-child(1) {
  animation-delay: .45s;
}
ul li:nth-child(2) {  
  animation-delay: .6s;
}
ul li:nth-child(3) {
  animation-delay: .2s;
}
ul li:nth-child(4) {  
  animation-delay: 0.8s;
}
ul li:nth-child(5) {  
  animation-delay: .05s;
}