JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>

CSS

.heart {
  width: 100px;
  height: 100px;
  background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}

.active {
  background-position: -2800px 0;
  transition: background 1s steps(28);
}

JavaScript

function transclicker() {
    'use strict';
    var items = document.querySelectorAll('.heart');

		function clickHandler(item) {
				item.classList.add('active');
		}
    
    function transHandler(item) {
				item.classList.remove('active');
		}
    
    for(var i = 0, len = items.length; i < len; i++) {
    
    		items[i].addEventListener('click', function(){clickHandler(this)});
        items[i].addEventListener('transitionend', function(){transHandler(this)});
    }
}

window.addEventListener('load', transclicker);

transclicker(); //эта строка только для демонстрации эффекта