Stop CSS animation when loading a second page

Question

I am adding this animation to my favorite button, which works fine, but when I reload the page, the animation starts up again and which interferes with the listing page. So, how can I control or stop the animation when the page reloads, if I click my favorite button once, and the thing becomes my favorite.

CSS code:

.event_box .eb_like i:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
	background: url(../img/alike.svg) 0 0 no-repeat;
	background-size: 2900%;
	height: 100px;
	width: 100px;
} 
.event_box .eb_like i.like:after{
  -webkit-animation: heart-burst steps(28) 0.8s 1 both;
  animation: heart-burst steps(28) 0.8s 1 both;
}

@-webkit-keyframes heart-burst {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

@keyframes heart-burst {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

Run code

Answer 1

In fact, one of the possible solutions is to save the key in the local storage of the browser. You can do something like this:

https://jsfiddle.net/pablodarde/vojrcoa4/

var btn = document.getElementsByClassName('btn-love')[0];


btn.addEventListener('click', function(e) {
    if (!window.localStorage.getItem('favorited')) {
    setTimeout(function() {
        document.getElementsByClassName('love')[0].setAttribute('id', '');
        window.localStorage.setItem('favorited',true);
    },1000);
  }
});

Answer 2

css, , :

• () cookie js , ,
• ( ), , , , db,