Skip to content

Instantly share code, notes, and snippets.

@panicbus

panicbus/addPulse.js

Created December 4, 2017 17:32
Show Gist options
  • Save panicbus/8ca5ba3599fc0b7c851a9a956866c1e6 to your computer and use it in GitHub Desktop.
Save panicbus/8ca5ba3599fc0b7c851a9a956866c1e6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. panicbus revised this gist Dec 4, 2017. No changes.
  2. panicbus created this gist Dec 4, 2017.
    3 changes: 3 additions & 0 deletions addPulse.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    $('.selector').on('click', function() {
    $(this).addClass('addPulse');
    })
    71 changes: 71 additions & 0 deletions heart-pulse.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    .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);
    }
    }