The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Pulsating Heartbeat

  • # December 21, 2012 at 10:17 pm

    Is there a way to make a pulsating heartbeat with jQuery?

    # December 21, 2012 at 10:28 pm

    You could animate the font-size up and down, you could also do it with CSS transitions.

    # December 21, 2012 at 10:31 pm

    CSS transitions would only work on normal/hover though. I’m not sure if IE9 supports CSS animations either.

    # December 21, 2012 at 10:44 pm

    This is where I’m at right now:

    Still working on it, it’s super late so eyes are tired :)

    # December 21, 2012 at 10:52 pm

    Appreciate the demo but the jQuery is not working.

    # December 21, 2012 at 11:07 pm

    Revived that heart beat –

    # December 21, 2012 at 11:11 pm

    Works great in Firefox (other than the huge margin) but not in Chrome for some reason.

    # December 21, 2012 at 11:14 pm

    Might have been because I was dicking about with it that you got those glitches, was trying to absolutely position it to the right of the text because otherwise it kind of pushes the other text left as the size increases. Working fine in Chrome for me.

    Make sure you refresh as it’s doc ready.

    # December 21, 2012 at 11:15 pm

    Boom. That was the cause. Thanks a lot, man.

    # December 21, 2012 at 11:20 pm


    # December 22, 2012 at 12:11 am

    Now if I could only get it to stop animating after my mouse leaves the heart.

    # December 22, 2012 at 12:11 am

    This reply has been reported for inappropriate content.

    Nice 2

    # December 22, 2012 at 7:23 am

    Here the heart animates only on hover

    Like to see bad code?
    Here was my original solution.
    It is inferior because the heart can stop beating between the “keyframes”, which can result in a sluggish start when resuming the animation.

    # December 22, 2012 at 8:22 am

    Thank you @hotpink! Here is the full result:

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed