How to make it work all the time? Twitter heart

main display

<span class="notify-cart-heart"></span>

.notify-cart-heart{
  display: none;
}

backend universal

$(".xxx").load("/models/notify?type=cart", function(data){
    if(data!=""){
      $(".notify-cart-heart").css("display","block").addClass("notify-cart-heart-done");
    }else{
      $(".notify-cart-heart").css("display","none");
    }
  });

css

.notify-cart-heart {
  cursor: pointer;
  height: 30px;
  width: 30px;
  background-image:url( "../../images/twitter_heart.png");
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
}

.notify-cart-heart-done{
  background-position:right;
}

.is_animating {
  animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}

Press back button and event

// removeClass("is_animating notify-cart-heart-done");

$(".notify-cart-heart").addClass("is_animating notify-cart-heart-done");

.. / images/twitter_heart.png

my problem now is that
will have an effect when it goes down for the first time
, but what I want is that it will be effective every time it is better.
but now that it will always stop in the state of notify-cart-heart-done, I have removed removeClass ("is_animating notify-cart-heart-done") it, but it still works?