Why doesnt this keyframe animation work?

HTML & CSS
1

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:

<i class="icon-heart"></i>

the fontello “setup”:

@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'; } /* '&#59404;' */

The keyframe and rest of the heart 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.

2

HI,

You need to include the webkit prefix for the transform property.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
@-webkit-keyframes pound {  
to {-webkit-transform: scale(1.4);}
}
@-moz-keyframes pound {  to {-webkit-transform: scale(1.4);}
}
@keyframes pound {  
to {transform: scale(1.4);}
}
.icon-heart {
	color: #e00;
	-webkit-animation: pound .25s infinite alternate;
	-moz-animation: pound .25s infinite alternate;
	animation: pound .25s infinite alternate;
	display:inline-block;
}
</style>
</head>

<body>
<div class="icon-heart">Test</div>
</body>
</html>
3

thx dude that solved it.