heartbeat on image with box shadow

test.html

<div>
  <img class="heartbeat" src="https://via.placeholder.com/150"/>
</div>


/*heartbeat*/
.heartbeat
{
    border-radius: 50%;
    box-shadow: 0px 5px 10px red;
    -webkit-animation: heartbeat 8s;
            animation: heartbeat 8s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@keyframes heartbeat
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
        box-shadow: 0px 5px 15px red;
        transform: scale(1);
    }
    10%, 30%, 50%, 70%, 90%
    {
        box-shadow: 0px 5px 0px red;
        transform: scale(1.15);
    }
}
@-webkit-keyframes heartbeat
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
        -webkit-transform: scale(1);
    }
    10%, 30%, 50%, 70%, 90%
    {
        -webkit-transform: scale(1.15);
    }
}