间隔标志动画

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>