body {
  margin: 0;
  padding: 0;
  background-color: #FFFACD;
  }

#container {
  width: 500px;
  height: 500px;
  padding-top: 80px;
  margin: 0 auto;
  }

.dot{
  width: 20px;
  height: 20px;
  margin: 30px auto;
  border-radius: 50px;
  }

.dot:nth-child(1) {
	background-color: #E6E6FA;
	animation: left 1.5s infinite ease-in-out;
    }

.dot:nth-child(2) {
	background-color: #E6E6FA;
	animation: left 1.4s infinite ease-in-out;
    }

.dot:nth-child(3) {
	background-color: #E6E6FA;
	animation: left 1.3s infinite ease-in-out;
    }

.dot:nth-child(4) {
	background-color: #E6E6FA;
	animation: left 1.2s infinite ease-in-out;
    }

.dot:nth-child(5) {
	background-color: #E6E6FA;
	animation: left 1.1s infinite ease-in-out;
    }

@keyframes right {
  0% { transform: translate(-25px);}
  50% { transform: translate(25px);}
  100% { transform: translate(-25px);}
  }
  
@keyframes left {
  0% { transform: translate(25px);}
  50% { transform: translate(-25px);}
  100% { transform: translate(25px);}
  } 