Animated button

This is an animated button using css transitions and a tiny bit of JS to add remove the class.

by rdillman

HTML

<div id="test">
  <p>BOUNCING BUTTON</p>
</div>
<!--
This is an animated button using CSS animation and a small ammount of JS to add remvoe the class. Works in all modern browsers and fall back to hover states for older non compliant browsers.
-->

CSS

* {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
html {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 125%;
  background-color: #eee;
  background-image: url('images/page-bg-gradient.png');
  background-repeat: repeat-x;
  background-position: bottom;
  color: #333;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding:20px;
}
#test p{
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff75ff), color-stop(1, #000000));
  background:-moz-linear-gradient(center top, #ff75ff 5%, #000000 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff75ff', endColorstr='#000000');
  background-color:#ff75ff;
  padding:6px 24px;
}
#test {
  -webkit-box-shadow:inset 0px 1px 0px 0px #cccccc;
     -moz-box-shadow:inset 0px 1px 0px 0px #cccccc;
          box-shadow:inset 0px 1px 0px 0px #cccccc;
  background-clip: padding-box;
  overflow:hidden;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  border:1px solid #cccccc;
  cursor:pointer;
  display:inline-block;
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
  -webkit-mask-image: -webkit-linear-gradient(#000, rgba(0, 0, 0, .9));
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: .2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
     -moz-animation-duration: 1s;
     -moz-animation-delay: .2s;
     -moz-animation-timing-function: ease;
     -moz-animation-fill-mode: both;
      -ms-animation-duration: 1s;
      -ms-animation-delay: .2s;
      -ms-animation-timing-function: ease;
      -ms-animation-fill-mode: both;
       -o-animation-duration:...

JavaScript

$(document).on('click', '#test', function () {
  $(this).addClass('bounce')
    .bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function () {
    $(this).removeClass('bounce');
  });
});