@import './mixins/army';

.animated {
  .shooting {
    #person {
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-name: person;
    }

    #persons {
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-name: persons;
    }

    #army-container {
      translate: -700px 0px;
    }

    .boom {
      translate: 800px 2000px;
    }
  }
}

@keyframes person {
  0% {
    transform: translateX(1700px);
  }
  100% {
    transform: translateX(-1200px);
  }
}

@keyframes persons {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(-1000px);
  }
}

@include armyMixin;
