Анимация нажатия на сердечко на CSS

Всем привет, в новой записи, я вам покажу готовую анимацию нажатия на сердечко на CSS. Данная анимация подойдёт для размещения под постами или для размещения в качестве кнопки для добавления в избранно в интернет-магазине.

Кнопка состоит из HTML элемента, CSS кода для анимации и изображения с кадрами анимации.

Картинка для анимации

HTML

<div class="iconHeart"></div>

CSS

.iconHeart {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("https://prog-time.ru/wp-content/uploads/2022/06/img_favorite_icon.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: fave-heart 1s steps(28);
}
.iconHeart:hover {
  background-position: -2800px 0;
  transition: background 1s steps(28);
}
@keyframes fave-heart {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}

Активация при нажатии на сердечко

CSS

.iconHeart {
    width: 100px;
    height: 100px;
    position: absolute;
    left: auto;
    right: -10px;
    top: -20px;
    transform: translate(0%, 0%);
    background: url("http://bintaga.ru/local/templates/bintaga/images/icons/img_favorite_icon.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
}

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

@keyframes fave-heart {
    0% {
	background-position: 0 0;
    }
    100% {
	background-position: -2800px 0;
    }
}

JavaScript

$(".favoriteBut").on("click", function() {
    $(this).addClass("active")
    $(this).find(".scattering").addClass("active")
})