I want to have an horizontal row slowly fade in starting from the center towards the outer sides. All with a delay that starts after another animation that i already successfully applied to the background (section and its content), hence the animation-delay.
What i have now is this:
background-image: linear-gradient(to right, rgba(0,0,0,0), var(–clr-light), rgba(0,0,0,0));
margin-block: 0 1em;
I set the opacity on the < hr > to 0 because what happened before was that it started with a hr in place and when the animation-delay kicked in it got replaced by the animation - the 5s scaleX transformation. But now including the opacity, all starts how i want it but the hr is gone once the animation is finished - I want it to remain in place. Also I do not want it to be repeated, just stay there in place after the 8s delay.
Where did i go wrong?
See https://codepen.io/21karat/pen/LYjxVeM for the full CSS and html regarding this hero section - skip the navigation and move down to the HERO section.