$duration-before-shot: 4s;
$animation-shot-duration: 0.5s;
$numbers-of-shots: 10;

.animated {
  #start {
    #arm {
      animation-name: main_arm;
      animation-delay: $duration-before-shot;
      animation-duration: $animation-shot-duration;
      animation-iteration-count: $numbers-of-shots;
      animation-timing-function: linear;
      transform-origin: 4661px 3270px;
    }

    #arm_x5F_part_x5F_2 {
      animation-name: arm_2;
      animation-delay: $duration-before-shot;
      animation-duration: $animation-shot-duration;
      animation-iteration-count: $numbers-of-shots;
      animation-timing-function: linear;
      transform-origin: 4615px 3211px;
    }

    #shot_x5F_fire {
      display: block;
      opacity: 0;
      animation-name: start_gun_shot;
      animation-delay: $duration-before-shot;
      animation-duration: $animation-shot-duration;
      animation-iteration-count: $numbers-of-shots;
      animation-timing-function: linear;
    }

    #head_1_ {
      animation-name: start_cowboy_head;
      animation-duration: 0.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes main_arm {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(-5deg);
  }
  10% {
    transform: rotate(-5deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes arm_2 {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(10deg);
  }
  10% {
    transform: rotate(10deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes start_gun_shot {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes start_cowboy_head {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 1);
  }
  50% {
    transform: matrix(1, 0, 0, 1, 0.3, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 1);
  }
}
