quick css throb effect with vanilla js

For a long time, I've been meaning to get back to the 30 Day Vanilla JS Coding Challenge. I learned a lot from the very first lesson even, which is a nifty little drum kit. Here's a kind of "throb" effect I picked up and modified from it, uss CSS transitions and transforms for scale: click the blue div to see it work...

 

0

Here's the code for that, most relevant bits bolded:
<style>
  #css_throb_button {
    background-color:blue;
    color:white;
    padding:4px 20px;
    transition: all .1s ease;
  }
  .throbbed {
    transform: scale(2);
  }
</style>
<div id="css_throb_button" onclick="css_throb_test(event);">0</div>
<script>
  var css_throb_count = 0;
  function css_throb_test(e){
    var panel = e.target;
    panel.classList.add('throbbed');
    panel.innerHTML = ++css_throb_count;
  }
  function css_throb_removethrob(e){
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('throbbed');

  }
  document.getElementById("css_throb_button").addEventListener('transitionend', css_throb_removethrob);  
</script>

So a couple notes:

• there are a few ways of removing the class. You could also use setTimeout, but this is nice because it keeps you from having to confirm the timing (as set in the transition) in two places.
• the scale transform doesn't work on inline elements - so when I started with a "span", I couldn't see the transform effect until I changed it to display:inline-block...
• also to keep things simple I'm not doing anything special for making sure the document is ready, so I had to put the script tag after the div element in the page so the getElementById() would work

I like how it zooms in place. There are ways of tweaking the timing, size, and easing, but this seems like an easy way of getting attention to the element.