1

これの何が問題になっていますか (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>

何か案は？

4

1 に答える 1

0

CSS3 アニメーションは Mozilla 16 以降でのみサポートされているため、Mozilla のバージョンを再検討することをお勧めします。

また、それが役立つかどうかはわかりませんが、コードを調べてください

@-moz-keyframes grow@-moz-keyframes "grow"「」を逃しました。うまくいくことを願っています。

于 2015-07-09T05:15:26.197 に答える