Анимация логотипа с интервалом

setInterval(function(){ 
  $('.navbar-brand').addClass('anim'); 
},2000); 
 
setInterval(function(){ 
  $('.navbar-brand').addClass('anim-b'); 
},7000); 
 
setInterval(function(){ 
  $('.navbar-brand').removeClass('anim anim-b'); 
},10000);

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css); 
 
.navbar-brand { 
  display: flex; 
  align-items: center; 
} 
 
.navbar-brand>img { 
  width: 40px; 
} 
 
.navbar-brand>span { 
  display: block; 
  width: calc(100% -40px); 
} 
 
.anim.navbar-brand>img { 
    animation: flip 2s ease-in-out both; 
} 
 
.anim-b.navbar-brand>img { 
    animation: flipOut 2s ease-in-out both; 
} 
 
@keyframes flip { 
    0% { 
      transform: rotateY(0deg);   
    } 
    100% { 
      transform: rotateY(180deg);   
    } 
} 
 
 
@keyframes flipOut { 
    0% { 
        transform: rotateY(180deg);   
    } 
    100% { 
        transform: rotateY(0deg);   
    } 
} 
 
 
 
.anim.navbar-brand span {     
    animation: l 2s ease-in-out both; 
} 
 
 
.anim-b.navbar-brand span {     
    animation: lOut 2s ease-in-out both; 
} 
 
 
 
 
 
@keyframes l { 
    0% { 
        opacity: 0; 
        transform: translateX(100%); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0%); 
    } 
} 
 
 
 
@keyframes lOut { 
    0% { 
        opacity: 1; 
        transform: translateX(0%); 
    } 
    100% { 
        opacity: 0; 
        transform: translateX(100%); 
    } 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
  <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#"> 
      <img src="http://simpleicon.com/wp-content/uploads/rocket.svg" alt=""> 
      <span>Navbar</span> 
    </a> 
  </nav>