【发布时间】：2015-11-22 04:22:57
【问题描述】：
我正在尝试使用 CSS 代码创建摆动运动。该代码在 Chrome 中运行良好，但在 Firefox 和 IE 中运行良好。正在运行的代码是：
@-webkit-keyframes spaceboots {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
10% {
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
-webkit-transform: translate(-3px, 0px) rotate(1deg);
}
30% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(1px, -1px) rotate(1deg);
}
50% {
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg);
}
80% {
-webkit-transform: translate(-1px, -1px) rotate(1deg);
}
90% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
100% {
-webkit-transform: translate(1px, -2px) rotate(-1deg);
}
}
.shake:hover, .shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
它会影响以下 div 标签。其中之一在这里给出：
<form action="http://www.ahtcsonline.com/descriptions-tracs.html" target="_blank" onclick="window.open('http://www.ahtcsonline.com/descriptions-tracs.html','popup','width=650,height=600,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">
<div class="c3">
<p class="Title"><a href="descriptions-tracs.html" target="_parent" title="Register for our Online TRACS Class"><img src="images/TRACS Page.png" alt="TRACS 202D" name="TRACS" width="87" height="104" border="0" align="top" class="shake" id="TRACS" ></a></p>
</div>
</form>
以上代码在 Chrome 中运行良好，但在任何其他浏览器上运行良好。通过搜索我发现对于Firefox和其他浏览器我必须更改一些语法，所以我在之前的代码中添加了以下代码（以下仅针对Firefox），但仍然无法正常工作。
@-webkit-keyframes spaceboots {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-moz-animation-name: spaceboots;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
.shake {
display:inline-block
}
【问题讨论】：
标签： css internet-explorer firefox