Html CSS动画不会启动

我设置了一个简单的css动画，使一个圆增长，但它并没有开始。怎么了

HTML

---

关键帧使用了错误的前缀

尝试更改：

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

到

这将修复您的动画

请阅读此处，了解应使用哪些前缀以及在何处使用：

同时更新了小提琴：

为了完整性-网页“我应该加前缀”说明你应该为动画加前缀，就像这样：你也可以用这种方式为所有前缀设置前缀

@-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动画属性的完整和全面的分解：

我可以看到它在适当地添加所有前缀后工作（在标准的

@关键帧中有
-moz-
，这可能会导致问题）。您正在使用的浏览器及其版本是什么？@Harry thx，但它仍然无法工作
@keyframes growUp {
  0%  { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); }
}

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

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