.shot-beatle {
    width: 10px;
    height: 2px;
    position: fixed;
    background: rgb(132, 247, 247);
    box-shadow: 2px 2px 5px rgb(6, 171, 201);
    animation: shot-beatle 20s ease-in-out 0.8s infinite;
    opacity: 0;
    visibility: hidden;
}
.shot-beatle-2 {
    width: 10px;
    height: 2px;
    position: fixed;
    background: rgb(132, 247, 247);
    box-shadow: 2px 2px 5px rgb(6, 171, 201);
    animation: shot-beatle-2 20s ease-in-out 1s infinite;
    opacity: 0;
    visibility: hidden;
}
.shot-berk {
    width: 10px;
    height: 2px;
    position: fixed;
    background: rgb(9, 240, 28);
    box-shadow: 2px 2px 5px rgb(11, 236, 112);
    animation: shot-berk 20s ease-in-out 5.5s infinite;
    opacity: 0;
    visibility: hidden;
}
.beatle, .berk {
    width: 30px;
    height: 30px;
    position: fixed;
}
.beatle {
    animation: beatleFly 20s ease infinite;
}
.berk {
    animation: berkFly 20s ease 1s infinite;
    opacity: 0;
    visibility: hidden;
}


@keyframes beatleFly {
   0% {
       top: 15%;
       right: -2%;
   }
   5% {
       top: 15%;
       right: 10%;
       transform: rotate(-70deg);
   }
   /* перовый выстрел */
   10% {
       top: 15%;
       right: 10%;
       transform: rotate(-70deg);
   }
   15% {
       top: 15%;
       right: 12%;
       transform: rotate(110deg);
   }
   25% {
       top: 25%;
       right: 25%;
       transform: rotate(110deg);
   }
   35% {
       top: 25%;
       right: 25%;
       transform: rotate(-70deg);
   }
   /* второй вытрел */
   40% {
       top: 25%;
       right: 25%;
       transform: rotate(-70deg);
   }
   45% {
       top: 25%;
       right: 27%;
       transform: rotate(110deg);
   }
   60% {
       top: 45%;
       right: 65%;
       transform: rotate(-70deg);
   }
   63% {
       top: 45%;
       right: 65%;
       transform: rotate(-70deg);
   }
   65% {
       top: 45%;
       right: 65%;
       transform: rotate(-70deg);
   }
   68% {
       top: 45%;
       right: 65%;
       transform: rotate(-70deg);
   }
   /* Третий выстрел */
   73% {
       top: 45%;
       right: 65%;
       transform: rotate(-70deg);
   }
    78% {
       top: 46%;
       right: 67%;
       transform: rotate(110deg);
   }
   95% {
       top: 55%;
       right: 150%;
       transform: rotate(110deg);
   }
   100% {
       top: 55%;
       right: 150%;
       transform: rotate(110deg);
   }

}

@keyframes shot-beatle {
    0% {
        top: 15.5%;
        right: 10%;
        opacity: 1;
        visibility: visible;

    }
    2% {
        top: 15.5%;
        right: 1%;
    }
    2.1% {
        box-shadow: 0px 0px 2px rgb(0, 255, 255);
    }
    2.5% {
        box-shadow: 0px 0px 10px 15px rgb(2, 252, 252);
        border-radius: 100%;
    }
    4% {
        box-shadow: 0px 0px 10px 15px rgb(0, 255, 255);
        border-radius: 100%;
        opacity: 0;
        visibility: hidden;
    }
    29% {
        opacity: 0;
        visibility: hidden;
        box-shadow: none;
    }
    30% {
        opacity: 1;
        visibility: visible;
        top: 25.5%;
        right: 25%;
   }
   32% {
        opacity: 1;
        visibility: visible;
        top: 25.5%;
        right: -2%;
   }
   33% {
       opacity: 0;
       visibility: hidden;
   }
}

@keyframes shot-beatle-2 {
    0% {
        top: 18.9%;
        right: 10%;
        opacity: 0;
        visibility: hidden;

    }
    1% {
        top: 18.9%;
        right: 10%;
        opacity: 1;
        visibility: visible;

    }
    2% {
        top: 18.9%;
        right: -2%;
        opacity: 1;
        visibility: visible;
    }
    3% {
        opacity: 0;
        visibility: hidden;
    }
    29% {
        opacity: 0;
        visibility: hidden;
    }
    31% {
        opacity: 1;
        visibility: visible;
        top: 28%;
        right: 25%;
   }
   33% {
        opacity: 1;
        visibility: visible;
        top: 28%;
        right: 8%;
   }
   33.1% {
        box-shadow: 0px 0px 2px rgb(0, 255, 255);
   }
   33.5% {
       box-shadow: 0px 0px 10px 15px rgb(2, 252, 252);
       border-radius: 100%;
   }
   35% {
       opacity: 0;
       visibility: hidden;
       box-shadow: 0px 0px 10px 15px rgb(2, 252, 252);
       border-radius: 100%;
   }

}
@keyframes berkFly {
    0% {
       top: 15%;
       right: -2%;
       opacity: 1;
       visibility: visible;
    }
    5% {
       top: 15%;
       right: 2%;
       opacity: 1;
       visibility: visible;
    }
    15% {
       top: 25%;
       right: 7%;
       opacity: 1;
       visibility: visible;
   }
   /* Первый выстрел */
    20% {
       top: 25%;
       right: 7%;
       transform: rotate(0deg);
       opacity: 1;
       visibility: visible;
   }
   25% {
       top: 25%;
       right: 7%;
       transform: rotate(0deg);
       opacity: 1;
       visibility: visible;
   }
   40% {
       top: 25%;
       right: 7%;
       transform: rotate(0deg);
       opacity: 1;
       visibility: visible;
   }
   52% {
       top: 45%;
       right: 30%;
       opacity: 1;
       visibility: visible;
   }
   75% {
       top: 45%;
       right: 30%;
       opacity: 1;
       visibility: visible;
   }
   100% {
       top: 55%;
       right: 150%;
       opacity: 1;
       visibility: visible;
   }

}

@keyframes shot-berk {
    0% {
       top: 27%;
       right: 9%;
       opacity: 1;
       visibility: visible;
    }
    2% {
       top: 27%;
       right: 25%;
       opacity: 1;
       visibility: visible;
    }
    2.1% {
        box-shadow: 0px 0px 2px rgb(9, 240, 28);
    }
    2.5% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
    }
    4% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
         opacity: 0;
         visibility: hidden;
    }
    29% {
        top: 47%;
        right: 32%;
        opacity: 0;
        visibility: hidden;
        box-shadow: none;
    }
    30% {
        top: 47%;
        right: 32%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
    32% {
        top: 47%;
        right: 65%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
    32.1% {
        box-shadow: 0px 0px 2px rgb(9, 240, 28);
    }
    32.5% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
    }
    34% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
         opacity: 0;
         visibility: hidden;
    }
    45% {
        opacity: 0;
        visibility: hidden;
    }

    46% {
        top: 47%;
        right: 32%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
    47% {
        top: 47%;
        right: 67%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
    47.1% {
        box-shadow: 0px 0px 2px rgb(9, 240, 28);
    }
    47.5% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
    }
    49% {
         box-shadow: 0px 0px 10px 15px rgb(9, 240, 28);
         border-radius: 100%;
         opacity: 0;
         visibility: hidden;
    }
    
}