CODEWITHSUNDEEP
htmlcss
vuvu
vuvu

Reputation: 5328

CSS Animation does not start

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); }
}

Upvotes: 2

Views: 2415

Answers (1)

Adjit
Adjit

Reputation: 10305

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/

Upvotes: 6

Related Questions