CSS CSS3 关键帧动画在 Firefox 和 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20675714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 01:21:36 来源:igfitidea点击:
CSS3 keyframe animation not working in firefox and IE
提问by Metta
My css code works in chrome and safari but not on Firefox, IE and Opera.
when i create @keyframes rotate {} , for other browsers, this not worked
is that for this 4 line:
animation-duration: 4s;animation-timing-function: linear;animation-name:"rotate";animation-iteration-count: infinite;or for keyframe method?
how can i fix this?
我的 css 代码适用于 chrome 和 safari，但不适用于 Firefox、IE 和 Opera。当我创建 @keyframes rotate {} 时，对于其他浏览器，这不起作用是对于这 4 行：
animation-duration: 4s;animation-timing-function: linear;animation-name:"rotate";animation-iteration-count: infinite;还是对于关键帧方法？我怎样才能解决这个问题？
CSS:
CSS：
@-webkit-keyframes rotate {
0% {
-webkit-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
}
13% {
-webkit-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-webkit-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-webkit-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-webkit-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-webkit-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-webkit-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-webkit-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-webkit-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************** F I R E F O X ***********************/
@-moz-keyframes rotate {
0% {
-moz-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
}
13% {
-moz-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-moz-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-moz-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-moz-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-moz-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-moz-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-moz-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-moz-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************************************/
@keyframes rotate {
0% {
transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
}
13% {
transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************** I E ***********************/
@-ms-keyframes rotate {
0% {
-ms-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
}
13% {
-ms-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-ms-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-ms-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-ms-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-ms-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-ms-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-ms-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-ms-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/************************************/
@-o-keyframes rotate {
0% {
-o-transform:translate(73px, 73px) rotate(0deg) translate(-73px, -73px) rotate(0deg);
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
}
13% {
-o-transform:translate(73px, 73px) rotate(45deg) translate(-73px, -73px) rotate(-45deg);
}
25% {
-o-transform:translate(73px, 73px) rotate(90deg) translate(-73px, -73px) rotate(-90deg);
}
38% {
-o-transform:translate(73px, 73px) rotate(135deg) translate(-73px, -73px) rotate(0deg);
}
50% {
-o-transform:translate(73px, 73px) rotate(180deg) translate(-73px, -73px) rotate(-180deg);
}
63% {
-o-transform:translate(73px, 73px) rotate(225deg) translate(-73px, -73px) rotate(225deg);
}
75% {
-o-transform:translate(73px, 73px) rotate(270deg) translate(-73px, -73px) rotate(-270deg);
}
88% {
-o-transform:translate(73px, 73px) rotate(315deg) translate(-73px, -73px) rotate(315deg);
}
100% {
-o-transform:translate(73px, 73px) rotate(360deg) translate(-73px, -73px) rotate(-360deg);
}
}
/*************************************/
#circle {
height: 10px;
width: 10px;
border-radius:25px;
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:"rotate";
-webkit-animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
animation-name:"rotate";
animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:"rotate";
-moz-animation-iteration-count: infinite;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:"rotate";
-ms-animation-iteration-count: infinite;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:"rotate";
-o-animation-iteration-count: infinite;
position:absolute;
left:-1%;
top:-1%;
}
回答by Andrea Ligios
Remove the double quotes from the animation name (rotateinstead of "rotate").
从动画名称中删除双引号（rotate而不是"rotate"）。
Then it will work:
然后它将起作用：
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;
Remember, the non-prefixed properties must always be the last, after the vendor specific.
请记住，非前缀属性必须始终是最后一个，在特定于供应商之后。
P.S: In case you don't know, there are sites that prefix your code at compile-time (like Prefixr), or even at run-time (like prefix-free).
PS：如果您不知道，有些站点会在编译时（如Prefixr）或什至在运行时（如prefix-free）为您的代码添加前缀。
Btw +1, your animation is pretty :)
顺便说一句+1，你的动画很漂亮:)
