$("#leftlogo").on("mouseover", function(t) {
    $(t.target).css("animation-name", "left-over");
}).on("mouseout", function(t) {
    $(t.target).css("animation-name", "left-out");
});

//set boolean when animating
  var isAnimating = false;

  $("#leftlogo").on({
    //handle mouseover
    "mouseover": function(t) {
     $(t.target).css("animation-name", "left-over");
     isAnimating = true;
    },
    //handle animationend event
    "animationend": function(e) {
        if (e.animationName == "animation-name")
         {  isAnimating = false; }
    },
    //handle mouseout
   "mouseout": function(t) {
    while (isAnimating != false)
      {
        //hang on a sec
      };

      $(t.target).css("animation-name", "left-out");
    });

#leftlogo {
  transition: all 1s;
  background: pink;
}

#leftlogo:hover{
  background: yellow;
}