Question

我正在尝试使用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
}

Answer 1

您需要供应商前缀所有内容才能使其正常工作。在SASS或SCSS中使用Mixin将有助于消除许多无关的代码。

如果你在Compass上使用SASS，你可以这样做：

@import "compass/css3/transform"

@include translate($translate-x, $translate-y, $perspective, $only3d) {
//Insert values here
}

然后将所有供应商前缀导出到CSS。

如果您还有其他需要，请告诉我。

来源： http://compass-style.org/reference/compass/css3/transform/#mixin-translate

http://sass-lang.com/

Answer 2

这是您所需要的，在Chrome，Firefox，IE，Opera和Safari（demo）上进行测试：

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); /* Chrome, Opera 15+, Safari 3.1+ */ }
}
@-moz-keyframes spaceboots {
    0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
@-ms-keyframes spaceboots {
    0% { -ms-transform: translate(2px, 1px) rotate(0deg); /* IE 9 */ }
    10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); /* IE 9 */ }
    20% { -ms-transform: translate(-3px, 0px) rotate(1deg); /* IE 9 */ }
    30% { -ms-transform: translate(0px, 2px) rotate(0deg); /* IE 9 */ }
    40% { -ms-transform: translate(1px, -1px) rotate(1deg); /* IE 9 */ }
    50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); /* IE 9 */ }
    60% { -ms-transform: translate(-3px, 1px) rotate(0deg); /* IE 9 */ }
    70% { -ms-transform: translate(2px, 1px) rotate(-1deg); /* IE 9 */ }
    80% { -ms-transform: translate(-1px, -1px) rotate(1deg); /* IE 9 */ }
    90% { -ms-transform: translate(2px, 2px) rotate(0deg); /* IE 9 */ }
    100% { -ms-transform: translate(1px, -2px) rotate(-1deg); /* IE 9 */ }
}
@-o-keyframes spaceboots {
    0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
@keyframes spaceboots {
    0% { transform: translate(2px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    10% { transform: translate(-1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    20% { transform: translate(-3px, 0px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    30% { transform: translate(0px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    40% { transform: translate(1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    50% { transform: translate(-1px, 2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    60% { transform: translate(-3px, 1px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    70% { transform: translate(2px, 1px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
    80% { transform: translate(-1px, -1px) rotate(1deg); /* Firefox 16+, IE 10+, Opera */ }
    90% { transform: translate(2px, 2px) rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
    100% { transform: translate(1px, -2px) rotate(-1deg); /* Firefox 16+, IE 10+, Opera */ }
}
.shake:hover,
.shake:focus {
    -webkit-animation: spaceboots 0.8s infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spaceboots 0.8s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    transform-origin:50% 50%;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}

CSS代码在Firefox和IE中无效

2 个答案: