Question

我有一个代码来改变我想要摇动的元素的动画/ webkitanimation / mozanimation。它在chrome和safari中完美运行，但在IE或Firefox中完全没有。

该网站也是代码的一部分。我是一个新作家，并意识到我的代码是凌乱和臃肿，所以提前抱歉。在我的收件箱中对网站的任何一般反馈都会很棒。

http://www.fatbirdsounds.com/test/

一个例子的CSS

#chains1
{
width:24px;
height:103px;
background-image:url('chains1.png');
background-repeat:no-repeat;
position:relative;
margin-left:77px;
animation:shake 2s ease-in-out;
animation-iteration-count:0;
transform-origin:50% 0;
-webkit-animation:shake 2s ease-in-out;
-webkit-animation-iteration-count:0;
-webkit-transform-origin:50% 0;
-moz-animation:shake 2s ease-in-out;
-moz-animation-iteration-count:0;
-moz-transform-origin:50% 0;
}
@keyframes shake
{
0% {transform:rotate(0deg);}
10%{transform:rotate(3deg);}
20%{transform:rotate(0deg);}
30%{transform:rotate(-3deg);}
40%{transform:rotate(0deg);}
50%{transform:rotate(2deg);}
60%{transform:rotate(0deg);}
70%{transform:rotate(-2deg);}
80%{transform:rotate(0deg);}
90%{transform:rotate(1deg);}
}

@-webkit-keyframes shake
{
0% {-webkit-transform:rotate(0deg);}
10%{-webkit-transform:rotate(3deg);}
20%{-webkit-transform:rotate(0deg);}
30%{-webkit-transform:rotate(-3deg);}
40%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(2deg);}
60%{-webkit-transform:rotate(0deg);}
70%{-webkit-transform:rotate(-2deg);}
80%{-webkit-transform:rotate(0deg);}
90%{-webkit-transform:rotate(1deg);}
}

@-moz-keyframes shake
{
0% {-moz-transform:rotate(0deg);}
10%{-moz-transform:rotate(3deg);}
20%{-moz-transform:rotate(0deg);}
30%{-moz-transform:rotate(-3deg);}
40%{-moz-transform:rotate(0deg);}
50%{-moz-transform:rotate(2deg);}
60%{-moz-transform:rotate(0deg);}
70%{-moz-transform:rotate(-2deg);}
80%{-moz-transform:rotate(0deg);}
90%{-moz-transform:rotate(1deg);}
}

的Javascript

    function shakefacebook() 
{
 var chains1 = document.getElementById("chains1");
{
chains1.style.webkitAnimationIterationCount = '1';
chains1.style.mozAnimationIterationCount = '1';
chains1.style.AnimationIterationCount = '1';
}
}
function noshakefacebook()
{
 var chains1 = document.getElementById("chains1");
{
chains1.style.webkitAnimationIterationCount = '0';
chains1.style.mozAnimationIterationCount = '0';
chains1.style.AnimationIterationCount = '0';
}
}

HTML

<div id="chains1">
<div class="facebook">
<a href="http://www.facebook.com/fatbirdsounds" target="_blank" id="facebook" onMouseOver="shakefacebook()" onMouseOut="noshakefacebook()"></a>
</div>
</div>

我还尝试使用不同的迭代计数制作两个ID并使用element1.getElementById.id = element2但没有更改。

提前致谢！

element.animationIterationCount更改在IE或Firefox中不起作用

0 个答案: