.wrap{
  background: white;
  margin:0;
  padding:0;
  top:0;
  bottom:0;
}
button{
  border:none;
  border-radius:3px;
}
body{
  background: white;
  ;
}
.wrap{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.circle{
  width: 20px;
  height: 20px;
  margin: 10px;
  border-radius: 50%;
}
.circle-blue{
   background:  #9932CC;
   animation: wave 1000ms ease-in-out
   infinite;
}
.circle-red{
  background: #9400D3;
  animation: wave 1000ms 100ms
   ease-in-out infinite;
}
.circle-yellow{
  background: #800080;
  animation: wave 1000ms 200ms 
ease-in-out infinite;
}
.circle-green{
  background:#8B008B;
  animation: wave 1000ms 300ms 
  ease-in-out infinite;
}
.disappear{
  animation: wave 1s forwards;
}

@keyframes wave{
  1%{
    transform: translateY(10px);
  }
  80%{
    transform: translateY(-10px);
  }
  100%{
    transform: translateY(10px);
    opacity: 10;
    visibility: hidden;
  }
  }