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

只有Mozilla 16或更高版本支持CSS3动画。所以我建议你重新考虑你的Mozilla版本。

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

@-moz-keyframes grow应该是@-moz-keyframes "grow"。你错过了＆＃34;＆＃34;。希望它适合你。

Firefox没有显示CSS3动画

1 个答案: