I have a heart on my site and want to make it pounding. It is a fontello icon.

The code looks like this:

the markup:

Code HTML4Strict:
<i class="icon-heart"></i>

the fontello "setup":

Code CSS:
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?23402899');
  src: url('../font/fontello.eot?23402899#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?23402899') format('woff'),
       url('../font/fontello.ttf?23402899') format('truetype'),
       url('../font/fontello.svg?23402899#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-align: center;
}
 
.icon-heart:before { content: '\e80c'; } /* '' */

The keyframe and rest of the heart css:

Code CSS:
@-webkit-keyframes pound {
    to { transform: scale(1.4); }
}
 
.icon-heart {
    color: #e00;
    animation: pound .25s infinite alternate;
    transform-origin: center;
}

I have never used keyframes before, so I dont know if i have to do something more to make it work.