css - Firefox 不显示 CSS3 动画

Question

这有什么问题（在 Firefox 中）？在 Chrome 中，一切工作都相当顺利（除了当我到达某个位置时的小后空翻。我做错了什么？

关键帧：

@keyframes "grow" {
 from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }
 to {
    -webkit-transform: scale(2) rotate(180deg);
    -moz-transform: scale(2) rotate(180deg);
    -o-transform: scale(2) rotate(180deg);
    -ms-transform: scale(2) rotate(180deg);
    transform: scale(2) rotate(180deg);
 }
}

@-moz-keyframes grow {
 from {
   -moz-transform: scale(1);
   transform: scale(1);
 }
 to {
   -moz-transform: scale(2) rotate(180deg);
   transform: scale(2) rotate(180deg);
 }
}

@-webkit-keyframes "grow" {
 from {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 to {
   -webkit-transform: scale(2) rotate(180deg);
   transform: scale(2) rotate(180deg);
 }
}

@-ms-keyframes "grow" {
 from {
   -ms-transform: scale(1);
   transform: scale(1);
 }
 to {
   -ms-transform: scale(2) rotate(180deg);
   transform: scale(2) rotate(180deg);
 }
}

@-o-keyframes "grow" {
 from {
   -o-transform: scale(1);
   transform: scale(1);
 }
 to {
   -o-transform: scale(2) rotate(180deg);
   transform: scale(2) rotate(180deg);
 }
}

@keyframes "spin" {
 from {
    -webkit-transform: scale(2) rotate(0deg);
    -moz-transform: scale(2) rotate(0deg);
    -o-transform: scale(2) rotate(0deg);
    -ms-transform: scale(2) rotate(0deg);
    transform: scale(2) rotate(0deg);
 }
 to {
    -webkit-transform: scale(2) rotate(360deg);
    -moz-transform: scale(2) rotate(360deg);
    -o-transform: scale(2) rotate(360deg);
    -ms-transform: scale(2) rotate(360deg);
    transform: scale(2) rotate(360deg);
 }
}

@-moz-keyframes spin {
 from {
   -moz-transform: scale(2) rotate(0deg);
   transform: scale(2) rotate(0deg);
 }
 to {
   -moz-transform: scale(2) rotate(360deg);
   transform: scale(2) rotate(360deg);
 }
}

@-webkit-keyframes "spin" {
 from {
   -webkit-transform: scale(2) rotate(0deg);
   transform: scale(2) rotate(0deg);
 }
 to {
   -webkit-transform: scale(2) rotate(360deg);
   transform: scale(2) rotate(360deg);
 }
}

@-ms-keyframes "spin" {
 from {
   -ms-transform: scale(2) rotate(0deg);
   transform: scale(2) rotate(0deg);
 }
 to {
   -ms-transform: scale(2) rotate(360deg);
   transform: scale(2) rotate(360deg);
 }
}

@-o-keyframes "spin" {
 from {
   -o-transform: scale(2) rotate(0deg);
   transform: scale(2) rotate(0deg);
 }
 to {
   -o-transform: scale(2) rotate(360deg);
   transform: scale(2) rotate(360deg);
 }
}

然后我应用到特定元素：

.radial_div_item img:hover {
    -webkit-animation: spin 1s infinite linear, grow .5s 1 linear;
    -moz-animation: spin 1s infinite linear, grow .5s 1 linear;
    -ms-animation: spin 1s infinite linear, grow .5s 1 linear;
    -o-animation: spin 1s infinite linear, grow .5s 1 linear;
    animation: spin 1s infinite linear, grow .5s 1 linear;
}

图标的 HTML：

<div class="radial_div" style="position: relative">

        <div class="radial_div_item" style="position: absolute; left: 155px; top: -5px;"><a href="http://www.facebook.com/TerrasoftCorporation"><img src="img/menu/fb.png" title="Like Us on Facebook!" width="48" /></a></div>
        <div class="radial_div_item" style="position: absolute; left: 315px; top: 85px;"><a href="http://www.twitter.com/terrasoftlabs"><img src="img/menu/twit.png" title="Follow Us on Twitter!" width="48" /></a></div>
        <div class="radial_div_item" style="position: absolute; left: 315px; top: 280px;"><a href="http://gplus.to/tsoft"><img src="img/menu/plus.png" title="Add Us on Google+!" width="48" /></a></div>
        <div class="radial_div_item" style="position: absolute; left: 155px; top: 370px;"><a href="http://prj.terrasoft.x10.mx"><img src="img/menu/prj.png" title="Our Project Directory!" width="48" /></a></div>
        <div class="radial_div_item" style="position: absolute; left: -15px; top: 280px;"><a href="#contact" target="_self"><img id="contactOpener" src="img/menu/mail.png" title="Contact Us!" width="48" /></a></div>
        <div class="radial_div_item" style="position: absolute; left: -27px; top: 75px;"><a href="https://github.com/gabrielnahmias/"><img src="img/menu/hub.png" title="Check Out Our GitHub!" width="72" /></a></div>

</div>

有任何想法吗？

Answer 1

CSS3 动画仅在 Mozilla 16 或更高版本中受支持。所以我可能会建议您重新考虑您的 Mozilla 版本。

另外我不知道这会有所帮助，但请查看您的代码

@-moz-keyframes grow应该是@-moz-keyframes "grow"。你错过了“”。希望它对你有用。