CSS Pulse Animation

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 (@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.