• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / CSS Pulse Animation

CSS Pulse Animation

Last updated on September 10, 2018 by Sal Ferrarello

Sometimes it amazes me the powerful things we can do with CSS. Recently, I needed to make an element pulse (i.e. grow and shrink repeatedly). I was able to do this with a few lines of CSS without using any JavaScript.

Pulsing Button

Home

@keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(0.85); }
  to { transform: scale(1); }
}

.fe-pulse {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

Pulsing Button with Pause on Hover

It was also determined that it would be nice if the pulsing stopped when the element was hovered over (or in focus). To that end, I’m removing the animation-name on hover or focus. I could have used the animation-play-state property instead, however I wanted the element to be full size when hovered (or focused). Using animation-play-state: paused; would have caused the animation to pause (possibly mid-animation, when the element was shrunken).

Home

@keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(0.85); }
  to { transform: scale(1); }
}

.fe-pulse-w-pause {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.fe-pulse-w-pause:hover,
.fe-pulse-w-pause:focus {
  animation-name: unset;
}

Browser Support

CSS animations are well supported across many browsers, see Can I use css-animation. If a browser does not support CSS animations, it degrades gracefully by simply not showing the pulsing animation.

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming, Solution Tagged With: CSS

Reader Interactions

Comments

  1. Venkat says

    July 12, 2019 at 3:57 pm

    Thanks for this, very helpful!

    Reply
  2. Quy says

    August 15, 2019 at 4:35 am

    thanks for your tutorial.
    I appreciate it.

    Reply
  3. ZANETTI says

    July 2, 2020 at 2:04 pm

    como uso esta animação bno elementor?

    Reply
    • Sal Ferrarello says

      July 2, 2020 at 9:30 pm

      > How do i use this animation in elementor?

      I don’t know. I don’t use Elementor.

      Eu não sei. Eu não uso Elementor.

      Translation manually created with Google Translate.

      Reply
    • Alan says

      September 30, 2020 at 5:50 pm

      selector{
        animation-name: pulse;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      Reply
      • Victor says

        March 10, 2021 at 2:58 pm

        Obrigado Alan!! Deus te abençoe amigo

        Reply
  4. Piotr says

    July 18, 2020 at 3:03 pm

    That what i was searching for, thanks

    Reply
  5. Zabezpiecz Auto says

    July 18, 2020 at 3:04 pm

    I am using that pulsing animation on my site https://zabezpiecz-auto.pl/

    Reply
  6. Roberto Carlos says

    October 22, 2021 at 7:54 am

    Estou usando o pulse no site para gerar politica de privacidade.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in