如何为背景图像的不透明度设置动画？

Question

I'm trying to do a little animation on my header, I use the pink red lines and I want to disappear and appear on a keyframe, but when I apply my styles, all the container is animated (both box), I only want apply this animation on the pink lines. My code is has follow:

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

/* Esperimental 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 do only apply aopacity to my pink lines?

Answer 1

Try this:

    #header {
        position: relative;
        height: 100vh;
    }
    #header:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../img/header/0.png'); 
        width: 100%;
        height: 100%;
        opacity : 1;
        z-index: -1;
        -webkit-animation: changeBg 5s infinite;
        animation: changeBg 5s infinite;
        animation-direction: alternate;
        background-repeat: no-repeat;
        background-position: right bottom;
        animation-duration: 5s;
        animation-name: base-lines;
        animation-iteration-count: infinite;
    }

    @keyframes changeBg {
       0%   {opacity: 0.00;}
       100% {opacity: 1.00;}
    }