how to make animation have some delay time after played?

Question

I made a shooting start animation with an infinite value. What I want next is after the animation played, it has a 10 second delay and starts the animation again. But since I put an infinite value in the animation code, it doesn't have a break time and start rights away when the animation ends.

How can I change it to have a break time before it starts again?

#shooting_star { position: absolute;
                 height: 1px;
                 background: linear-gradient(-45deg, rgb(177 177 177), rgb(27 27 27));
                 width: 146px;
                 top: -25%;
                 left: 63%;
                 animation:shootingw 2s ease-in-out infinite,
                           shootingr 2s ease-in-out infinite;
                 transform: rotate(90deg);}
                           
@keyframes shootingw {
    0% {
        width:0;
    }
    30% {
        width:146px;
    }
    100% {
        width:0;
    }
}

@keyframes shootingr {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}

Answer 1

Converting Existing Keyframes to Add Delay

This may be an alternative implementation. Extending the last state of the set of keyframes can simulate a delay after each animation iteration. In this example, I used a div for testing purposes. If your open to using JavaScript there may be a way to introduce a delay but I find this pretty elegant since the animation will occur repeatedly anyways.

2s/(2s + 10s delay) = 2s/12s = 1/6

You can convert the existing animation keyframes by multiplying the percentages by approximately 1/6 and then adding the last state at 100%.

#shooting_star{ 
position: absolute;

/*Changed for viewing purposes*/
top: 20%;
left: 20%;


height: 1px;
background: linear-gradient(-45deg,rgb(177,177,177),rgb(27,27,27));
width: 146px;

animation:shootingw 12s ease-in-out infinite,
shootingr 12s ease-in-out infinite;
transform: rotate(90deg);
}
                           
@keyframes shootingw {
    0%{width:0;}
    5%{width:146px;}
    16%{width:0;}
    100%{width:0;}
}

@keyframes shootingr {
    0%{transform: translateX(0);}
    16%{transform: translateX(300px);}
    100%{transform: translateX(300px);}
}

<div id = "shooting_star"></div>