CSS动画无法启动

Question

我设置了一个简单的css动画,让一个圆圈成长,但它没有启动.怎么了？

小提琴

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

您为关键帧使用了错误的前缀.

尝试改变:

@keyframes growUp {
  0%  { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); }
}

至

@keyframes growUp {
  0%  { transform: scale(0); }
  100% { transform: scale(1); }
}

这应该可以修复你的动画.

在这里阅读,看看你应该使用哪些前缀,在哪里:http://shouldiprefix.com/

更新小提琴:http://jsfiddle.net/6c79780r/4/

为了完整性 - 网页"我应该前缀"声明您应该为动画添加前缀,如下所示:您也可以通过这种方式为所有前缀设置它.

@-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 */
}

可以在此处找到CSS3动画属性的完整和全面细分:http://css3files.com/animation/