Stop CSS animation on second time page load - html

Question

I am adding an this animation to a favorite button, which is working fine but when I reload the page then the animation once again runs and which is creating disturbance on listing page. So how can I control or stop the animation on page reload if the favorite button is clicked once and thing has become 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;
}
}

Answer 1

Actually, one possible solution is to store a key in browser's local storage. You can do something like that:
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

no way you can do that by css only, there are two ways both involving some coding:
(easy) you can set a cookie via js and use it to check if that
element has been clicked
(over complicated) if the user is logged in you can save that action in a database and when he reload the page you check the db and print the appropriate class