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);
}
}