JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="heartwrap">
     <span><i class="fa fa-heart"></i></span> <a href="#">Пульсирование</a>
  </div>

CSS

.heartwrap  {
    display: table;
  cursor:pointer;
}

.fa-heart {
    color: #fff;
    display: inline-block;
    font-size: 19px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform-origin: 50% 50% 0;
    vertical-align: middle;
        line-height: 27px !important;
}

.heartwrap span {
    background-color: #B83D6C;
    border-radius: 50%;
    display: inline-block;
    margin: 10px 5px;
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.heartwrap:hover > span i {
    animation: 1500ms ease 0s normal none 1 running pulse;
}
@keyframes pulse {
0% {
    transform: scaleX(1) scaleY(1);
}
10% {
    transform: scaleX(0.85) scaleY(0.85);
}
20% {
    transform: scaleX(1) scaleY(1);
}
30% {
    transform: scaleX(0.85) scaleY(0.85);
}
40% {
    transform: scaleX(1) scaleY(1);
}
50% {
    transform: scaleX(0.85) scaleY(0.85);
}
60% {
    transform: scaleX(1) scaleY(1);
}
70% {
    transform: scaleX(0.85) scaleY(0.85);
}
80% {
    transform: scaleX(1) scaleY(1);
}
90% {
    transform: scaleX(0.85) scaleY(0.85);
}
100% {
    transform: scaleX(1) scaleY(1);
}
}