Stop line animation in between at center - html

Question

I want this line will move smoothly from right to left but at the center it will stop for 4-5 seconds. Here we can also add some more lines,when first line came to center from right side ,it stops there and wait for another lines and when all lines came at center then all lines stop there for few seconds then again lines start moving in right side. This will continue for infinite loop.
.spinner {
position: relative;
top: 0;
left: 0;
width: 150px;
border: 15px solid transparent;
border-top-color: red;
animation: load 5s infinite ease-in-out;
}
#div {
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
#keyframes load {
0% {
opacity: 0;
left: 80%;
}
50% {
opacity: 1;
left: 45%;
}
100% {
opacity: 0;
left: 10%;
}
}
<div id="div" class="spinner"></div>

Answer 1

To "hold" the animation for 4 s means it will take 80% of the initial animation duration you defined. So in order to do that, just define the middle keyframe to span from 10% to 90%, leaving equal amount of 10% on both sides:
.spinner {
position: relative;
top: 0;
left: 0;
width: 150px;
border: 15px solid transparent;
border-top-color: red;
animation: load 5s infinite ease-in-out;
}
#div {animation-timing-function: cubic-bezier(0,1,1,1)}
#keyframes load {
0% {
opacity: 0;
left: 80%;
}
10%, 90% {
opacity: 1;
left: 45%;
}
100% {
opacity: 0;
left: 10%;
}
}
<div id="div" class="spinner"></div>