css3: Transform animation for pseudo element

Question

I try to rotate :before element but it won't rotate. Please, tell me, what I'm doing wrong.

http://jsfiddle.net/holden321/h7eEB/

HTML:

<div>hello</div>

CSS:

div {
    height:25px;
    line-height:25px;
    padding-left:35px;
    position:relative;
}

div:before {
    content:"";
    position:absolute;
    left:0;top:0;
    height:25px;
    width:25px;
    background:url(http://lorempixel.com/20/20/) no-repeat center;
    -webkit-transform:rotate(0deg);
    -webkit-animation-iteration-count:infinite;
    -webkit-animation: rotate 2s;
}

@-webkit-keyframes rotate { 
    100% { transform: rotate(360deg); } 
}

Answer 1

Forgot the prefix in the animation property transform :

@-webkit-keyframes rotate { 
  100% { -webkit-transform: rotate(360deg); } 
}

Working Demo

Edit : To make the iteration-count work change the order in CSS, first set the animation and then his properties:

-webkit-animation: rotate 2s; /*This First*/
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;

The Fiddle Demo