.balls{
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: relative;
    
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: relative;
  }
  #red {
    background: yellow;
    left: 27%;
    animation-timing-function: ease-out;
  }
  #yellowtwo {
    background: yellow;
    right: -1000px;
    animation-timing-function: ease-out;
  }
  #blue {
    background: blue;
    left: 56%;
    animation-timing-function: ease-out;
  }
  #yellow {
    background: blue;
    left: 20%;
    animation-timing-function: ease-out;
  }
  @keyframes relative {
    0% {
      top: -500px;
    }
    100% {
      top: 2000px;
    }
  }
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }