panicbus
12/4/2017 - 5:32 PM

Heart Pulse

a little css pulse of the heart

$('.selector').on('click', function() {
  $(this).addClass('addPulse');
})
.addPulse, .removePulse{
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: initial;
    animation-iteration-count: initial;
}

.addPulse{
    -webkit-animation-name: addPulse;
    animation-name: addPulse;
}

.removePulse{
    -webkit-animation-name: removePulse;
    animation-name: removePulse;
}

@-webkit-keyframes addPulse {
    25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    }

    75% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    
    }
}

@keyframes addPulse {
    25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    -ms-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    }

    75% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -ms-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    }
}

@-webkit-keyframes removePulse {
    25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    }

    75% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    }
}

@keyframes removePulse {
    25% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    -ms-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    }

    75% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -ms-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    }
}