Remove child element effect in CSS

	  
      $(document).ready(function(e) {

         const blocos = $("div.slider div.slide div");
      
         function startslider() {  
         
            ativa = $(".ativa")
         
            if (!$(ativa).next("div.slide").length) {
               // remove a classe do último
               $(ativa)
               .removeClass("ativa")
         
               // adiciona a classe no primeiro
               $("div.slider div.slide")
               .first()
               .addClass("ativa")
            }else{
               $(ativa)
               .removeClass("ativa")
               .next()
               .addClass("ativa")
            }
         
            setTimeout(startslider, 5000)
         }
         
         setTimeout(startslider, 5000)
         
          $("div.slider nav button.anterior").click(function(){
          
            prev = $(".ativa").prev();  
            prev = prev.length ? prev : blocos[ blocos.length - 1 ];  
            mostraBloco(prev);
            
          })
          
          $("div.slider nav button.proximo").click(function(){
              
            next = $(".ativa").next();   
            next = next.length ? next : blocos.first();    
            mostraBloco(next);
            
          })
          
          /* Função para exibir as imagens */
          function mostraBloco(next) {
              
            ativa = $(".ativa")
            
            $(ativa).removeClass("ativa")
            $(next).addClass("ativa")
            
          }
      
      })

      * {
          margin: 0;
          padding: 0;
          border: none;
          outline: 0;
      }
      body {
          width: 100vw;
      }
      ul {
          list-style: none;
      }
      .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
      }
       @-webkit-keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
       @keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
      @keyframes slider {
       0% {
       transform: scale(1);
      }
       100% {
       transform: scale(1.1);
      }
      }
      div.slider {
          position: relative;
          width: 100%;
          overflow: hidden;
      }
      div.slider div.slide {
          display: none;
      }
      .ativa {
          display: block !important;
          animation: fade 1s linear;
      }
      div.slider div.slide img {
          position: relative;
          width: 100%;
          animation: slider 1s linear;
          animation-fill-mode: forwards;
      }
      div.slider div.slide span {
          position: absolute;
          width: 100px;
          left: calc(50% - 50px);
          line-height: 40px;
          bottom: 0;
          text-align: center;
          color: rgb(255,255,255);
          z-index: 2;
      }
      div.slider nav {
          position: absolute;
          width: 100%;
          height: 40px;
          bottom: 0;
          background-color: rgba(0,0,0,.5);
          z-index: 1;
      }
      div.slider nav button {
          position: absolute;
          width: 150px;
          height: 100%;
          cursor: pointer;
      }
      div.slider nav button.anterior {
          left: 10%;
      }
      div.slider nav button.proximo {
          right: 10%;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="slider">
    
     <div class="slide ativa">
       <img src="_img/_banner/_site/bg_1.jpg" />
       <span>Este é 1</span>
     </div>
     
     <div class="slide">
       <img src="_img/_banner/_site/bg_2.jpg" />
       <span>Este é 2</span>
     </div>
    
     
     <div class="slide">
       <img src="_img/_banner/_site/bg_3.jpg" />
       <span>Este é 3</span>
     </div>
    
     <nav>
      <button class="anterior">Anterior</button>
      <button class="proximo">Próximo</button>
     </nav>
    
    </div>