Как сделать анимацию, чтобы она начала работу при hover, и если убрать курсор все равно отработала полностью?

$(".about-us-border-img").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() { 
    $(this).removeClass("animated"); 
    $('.animation-border-box').removeClass("animated"); 
    // или  
    //$('.animation-border-box, .about-us-border-img').removeClass("animated"); 
}) 
 
$(".about-us-box").hover(function() { 
    $('.animation-border-box, .about-us-border-img', this).addClass("animated");     
})

.about-us-box { 
  margin-top: 40px; 
  margin-left: 40px; 
  border: 1px solid black; 
  display: inline-block; 
} 
 
.about-us-border-img img { 
  width: 100px; 
  height: 100px; 
} 
 
@keyframes rotate-romb { 
  0% { 
    transform: rotate(0deg); 
  } 
  15% { 
    transform: rotate(-15deg); 
  } 
  60% { 
    transform: rotate(90deg); 
  } 
  100% { 
    transform: rotate(0deg); 
  } 
} 
 
@keyframes rotate-square { 
  0% { 
    transform: rotate(45deg); 
  } 
  15% { 
    transform: rotate(30deg); 
  } 
  60% { 
    transform: rotate(135deg); 
  } 
  100% { 
    transform: rotate(45deg); 
  } 
} 
 
 
/* ключевая привязка */ 
 
.animation-border-box.animated { 
  -moz-animation: rotate-romb 2s ease; 
  -webkit-animation: rotate-romb 2s ease; 
  animation: rotate-romb 2s ease; 
} 
 
.about-us-border-img.animated { 
  -moz-animation: rotate-square 2.5s ease; 
  -webkit-animation: rotate-square 2.5s ease; 
  animation: rotate-square 2.5s ease; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="about-us-box">about us 
    <div class="animation-border-box">animation-border-box</div> 
    <div class="about-us-border-img"><img src="https://olxua-ring08.akamaized.net/images_slandocomua/401251372_6_644x461_myagkaya-igrushka-kotik-mini-antistress-ugolek-_rev006.jpg" alt=""></div> 
</div>

const box = document.getElementById('about-us-box'); 
const el = document.getElementById('animation-box'); 
 
box.addEventListener('mouseenter', () => { 
if (el.classList.contains('anim')) return; 
el.classList.add('anim'); 
const timer = setTimeout(() => { 
    el.classList.remove('anim'); 
    clearTimeout(timer); 
}, 1000); 
})

#about-us-box { 
width:60px; 
height:60px; 
background: grey; 
} 
#animation-box { 
width: 50px; 
height:50px; 
background: red; 
} 
#animation-box.anim { 
animation: rotate 1s ease; 
} 
@keyframes rotate { 
 0%   { transform: rotate(0deg); } 
 15%  { transform: rotate(-15deg); } 
 60% { transform: rotate(90deg); } 
 100% { transform: rotate(0deg); } 
}

<div id="about-us-box"> 
  <div id="animation-box"></div> 
</div>