.wrapper {
  -webkit-animation: x 1s ease-in-out alternate infinite 0s both;
          animation: x 1s ease-in-out alternate infinite 0s both;
}

.wrapper > div {
  -webkit-animation: y 1s linear infinite 0s both;
          animation: y 1s linear infinite 0s both;
}

.wrapper:nth-of-type(2),
.wrapper:nth-of-type(2) > div {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.wrapper:nth-of-type(3),
.wrapper:nth-of-type(3) > div {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wrapper:nth-of-type(4),
.wrapper:nth-of-type(4) > div {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.wrapper:nth-of-type(5),
.wrapper:nth-of-type(5) > div {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}


@-webkit-keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}

@keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}


@-webkit-keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}


@keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}