https://i.sstatic.net/PuxYm.jpg
I am attempting to create a simple animation on my header using pink red lines that I want to make disappear and reappear on a keyframe. However, when I apply my styles, the entire container is animated instead of just the pink lines. I only want the animation to be applied to the pink lines specifically. Below is my code:
HTML
<div class="row m-0 section-1 position-relative">
<div style="background-color: #da2f9c;" class="col-12 col-md-5 pt-5 text-center mb-5 ">
</div>
<div id="header" class="col-12 col-md-7 position-relative">
<img class="img-fluid position-absolute" src="./assets/img/header/1.png">
<img class="img-fluid position-absolute" id="pc-base-glow2" src="./assets/img/header/2.png">
<img class="img-fluid position-absolute" src="./assets/img/header/3.png" alt="">
<img class="img-fluid position-absolute" id="core-down" src="./assets/img/header/4.png" alt="">
<img class="img-fluid position-absolute" id="core-up" src="./assets/img/header/5.png">
<img class="img-fluid position-absolute" src="./assets/img/header/6.png">
</div>
<div class="row position-absolute diagonal">
<div class="col-12 p-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,128L1440,320L1440,320L0,320Z"></path></svg>
</div>
</div>
</div>
CSS
/* Experimental header */
.section-1 {
background-color: #1b154e;
}
#header {
/* position: relative; */
height: 100vh;
background-image: url('../img/header/0.png');
background-repeat: no-repeat;
background-position: right bottom;
/* background-size: contain; */
animation-duration: 5s;
animation-name: base-lines;
animation-iteration-count: infinite;
}
#header img {
/* position: absolute; */
right: 0;
bottom: 12%;
}
How can I apply opacity to only the pink lines?