@keyframes clockwiseMovement {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  12.5% {
    transform: translate(10px, -20px);
    -webkit-transform: translate(10px, -20px);
    -moz-transform: translate(10px, -20px);
    -ms-transform: translate(10px, -20px);
    -o-transform: translate(10px, -20px);
  }
  25% {
    transform: translate(20px, 0);
    -webkit-transform: translate(20px, 0);
    -moz-transform: translate(20px, 0);
    -ms-transform: translate(20px, 0);
    -o-transform: translate(20px, 0);
  }
  37.5% {
    transform: translate(10px, 20px);
    -webkit-transform: translate(10px, 20px);
    -moz-transform: translate(10px, 20px);
    -ms-transform: translate(10px, 20px);
    -o-transform: translate(10px, 20px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  62.5% {
    transform: translate(-10px, -20px);
    -webkit-transform: translate(-10px, -20px);
    -moz-transform: translate(-10px, -20px);
    -ms-transform: translate(-10px, -20px);
    -o-transform: translate(-10px, -20px);
  }
  75% {
    transform: translate(-20px, 0);
    -webkit-transform: translate(-20px, 0);
    -moz-transform: translate(-20px, 0);
    -ms-transform: translate(-20px, 0);
    -o-transform: translate(-20px, 0);
  }
  87.5% {
    transform: translate(-10px, 20px);
    -webkit-transform: translate(-10px, 20px);
    -moz-transform: translate(-10px, 20px);
    -ms-transform: translate(-10px, 20px);
    -o-transform: translate(-10px, 20px);
  }
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
}
@keyframes nonClockwiseMovement {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  12.5% {
    transform: translate(-10px, 20px);
    -webkit-transform: translate(-10px, 20px);
    -moz-transform: translate(-10px, 20px);
    -ms-transform: translate(-10px, 20px);
    -o-transform: translate(-10px, 20px);
  }
  25% {
    transform: translate(-20px, 0);
    -webkit-transform: translate(-20px, 0);
    -moz-transform: translate(-20px, 0);
    -ms-transform: translate(-20px, 0);
    -o-transform: translate(-20px, 0);
  }
  37.5% {
    transform: translate(-10px, -20px);
    -webkit-transform: translate(-10px, -20px);
    -moz-transform: translate(-10px, -20px);
    -ms-transform: translate(-10px, -20px);
    -o-transform: translate(-10px, -20px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  62.5% {
    transform: translate(10px, 20px);
    -webkit-transform: translate(10px, 20px);
    -moz-transform: translate(10px, 20px);
    -ms-transform: translate(10px, 20px);
    -o-transform: translate(10px, 20px);
  }
  75% {
    transform: translate(20px, 0);
    -webkit-transform: translate(20px, 0);
    -moz-transform: translate(20px, 0);
    -ms-transform: translate(20px, 0);
    -o-transform: translate(20px, 0);
  }
  87.5% {
    transform: translate(10px, -20px);
    -webkit-transform: translate(10px, -20px);
    -moz-transform: translate(10px, -20px);
    -ms-transform: translate(10px, -20px);
    -o-transform: translate(10px, -20px);
  }
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
}
.element-one {
  animation: clockwiseMovement 30s infinite linear;
}

.element-two {
  animation: nonClockwiseMovement 15s infinite linear;
}

.element-three {
  animation: clockwiseMovement 20s infinite linear;
}

.element-four {
  animation: nonClockwiseMovement 20s infinite linear;
}