- solved - Horizontal row animation issue


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:

.hero hr
background-image: linear-gradient(to right, rgba(0,0,0,0), var(–clr-light), rgba(0,0,0,0));
height: 0.3em;
border: 0;
opacity: 0;
margin-block: 0 1em;
animation-name: hrFadeInAnimationHero;
animation-timing-function: ease;
animation-duration: 5s;
animation-delay: 8s;

@keyframes hrFadeInAnimationHero
transform: scaleX(0);

opacity: 1;
transform: scaleX(1);

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.

Hey @code-carrot.

I would suggest looking at the animation-fill-mode property.

Resources: https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

1 Like

Thanks! It is working now as i had in mind. I should have known, I took the animation code that included the “animation-fill-mode: forward” that I used on the background from some example and did not analyze it properly.


1 Like