CSS Animation does not start - html

Question

I set up a simple css animation, to make a circle grow, but it does not start. What is wrong?
js fiddle
HTML
<ul><li></li></ul>
CSS
li {
position: absolute;
height: 70px;
width: 70px;
display:block;
border: 5px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
animation: growUp 1s;
animation-iteration-count: infinite;
}
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}

Answer 1

You are using the wrong prefixes for your keyframes.
Try changing:
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
to
#keyframes growUp {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
That should fix your animation.
Read up here to see what prefixes you should use and where: http://shouldiprefix.com/
Updated fiddle as well: http://jsfiddle.net/6c79780r/4/
For completeness - the webpage "Should I Prefix" states you should prefix for animations like so: You can set it up this way for all prefixes as well.
#-webkit-keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
#keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
.example.is-animating {
...
-webkit-animation: MyAnimation 2s; /* Chr, Saf */
animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}
A complete and comprehensive breakdown of the CSS3 animation property can be found here: http://css3files.com/animation/