style.css

body {
  margin: 0;
}

.container {
  width: 100%;
}

.container div {
  width: 100%;
  height: 100px;
  -webkit-animation: left-right 2s forwards;
          animation: left-right 2s forwards;
}

.container div:nth-child(7n + 1) {
  background-color: #D4145A;
}

.container div:nth-child(7n + 2) {
  background-color: #FBB03B;
}

.container div:nth-child(7n + 3) {
  background-color: #662D8C;
}

.container div:nth-child(7n + 4) {
  background-color: #B066FE;
}

.container div:nth-child(7n + 5) {
  background-color: #312A6C;
}

.container div:nth-child(7n + 6) {
  background-color: #00537E;
}

.container div:nth-child(7n + 7) {
  background-color: #4F00BC;
}

@-webkit-keyframes left-right {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes left-right {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
/*# sourceMappingURL=style.css.map */