/* simple "from > to" */
@keyframes move {
  from {
      left: 5%;
  }
  to {
      left: 85%;
  }
}


/* assign animation to ball element */
.ball {
  animation: 1s move;
}









/* base styles */

body {
  text-align: center;
  background: #fafafa;
  position: relative;
}

.ball {
  width: 10%;
  padding-bottom: 10%;
  border-radius: 50%;
  background: #2098d1;
  box-shadow: -3px 5px 0px rgba(0,0,0,0.2);
  position: absolute;
  top: 100px;
  left: 5%;
}