Code:
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> Question: How to set the addition / deletion of the class for the logo animation, so that after a second there is a rocket flick and the text appears, after 3-4 seconds the reverse flip and the disappearance of the text ... after 5 seconds - repeat? Now there is a "stutter", apparently the imposition of time.
