Как я могу вызвать исчезновение фона после завершения анимации?

Question

• 1000 ?

<section id="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="box bg">
          <!-- Start of intro animation container --->
          <div class="title">
            <!-- Start of main heading --->
            <span class="block"></span>
            <h1 class="home-header second-header">WORN WAX<span class="dot2">.</span></h1>
          </div>
          <!-- End of main heading --->
          <div class="role">
            <!-- Start of sub heading --->
            <div class="block2"></div>
            <p class="role-text project-type">WEBSITE BUILD / APP DESIGNS</p>
          </div>
          <!-- End of sub heading --->
        </div>
        <!-- End of intro animation container --->
      </div>
    </div>
  </div>
</section>

Answer 1

Это красивое решение, работающее только на CSS, использует анимацию по ключевым кадрам. Если вы знаете, сколько времени занимает начальная анимация (я решил использовать затухание, потому что не знаю, что вам нужно), вы можете использовать это как задержку для затухания в фоновом режиме. Обязательно поместите фоновое изображение на псевдоэлемент, потому что уменьшение непрозрачности означает, что все внутри элемента также невидимо, включая его дочерние элементы .title и .role

.home-header,
.project-type {
  width: 200px;
  text-align: center;
  color: white;
  background-color: darkred;
  margin: 1rem auto;
  padding: 1rem;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

.box.bg {
  padding: 2px;
  position: relative;
}

.box.bg::after {
  content: "";
  opacity: 0;
  background-color: lightgreen;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  /* Delay until after the block animations */
  -webkit-animation: fadein 2s ease 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s ease 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s ease 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s ease 2s;
  /* Opera < 12.1 */
  animation: fadein 2s ease 2s;
}

# Based on https: //stackoverflow.com/a/11681331/5015356
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<section id="banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="box bg">
          <!-- Start of intro animation container --->
          <div class="title">
            <!-- Start of main heading --->
            <span class="block"></span>
            <h1 class="home-header second-header">WORN WAX<span class="dot2">.</span></h1>
          </div>
          <!-- End of main heading --->

          <div class="role">
            <!-- Start of sub heading --->
            <div class="block2"></div>
            <p class="role-text project-type">WEBSITE BUILD / APP DESIGNS</p>
          </div>
          <!-- End of sub heading --->

        </div>
        <!-- End of intro animation container --->
      </div>
    </div>
  </div>
</section>