css - 翻译在 Firefox 上不起作用，请问有人知道为什么吗？

Question

我一直在尝试制作一个跨平台的动画，最近我放弃了 ie，但我不明白为什么我使用翻译的实例都不能在 firefox 中工作，如果我是，谁能告诉我请问做错了什么吗？永远感激。

这是我要知道的代码:

span.glow-left{position: absolute; bottom: 50px; left: -10px; display: block;    width:40px; height: 80px; background: url(../img/glow-left.png) no-repeat; 

-webkit-animation:glowleft 2s linear infinite;
-moz-animation:glowleft 2s linear infinite;
animation:glowleft 2s linear infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
-webkit-animation-name: glowleft;
animation-name: glowleft;}

@keyframes glowleft { 
    1%{ -moz-transform:  translatey(-20px);opacity:0.5;}
    2%{ -moz-transform:  translatey(-20px);opacity:1;}
    13% { -moz-transform:  translatey(-150px); opacity: 1 }
    40% { -moz-transform:  translatey(-340px); opacity:0.5;} 
    50% { -moz-transform:  translatey(-340px); opacity:0;} 
    100% { -moz-transform:  translatey(-340px); opacity: 0; } 
}

@-webkit-keyframes glowleft { 
    1%{ -webkit-transform:  translatey(-20px);opacity:0.5;}
    2%{ -webkit-transform:  translatey(-20px);opacity:1;}
    13% { -webkit-transform:  translatey(-150px); opacity: 1 }
    40% { -webkit-transform:  translatey(-340px); opacity:0.5;} 
    50% { -webkit-transform:  translatey(-340px); opacity:0;} 
    100% { -webkit-transform:  translatey(-340px); opacity: 0; } 
}

@keyframes glowleft { 
    1%{ -webkit-transform:  translatey(-20px);opacity:0.5;}
    2%{ -webkit-transform:  translatey(-20px);opacity:1;}
    13% { -webkit-transform:  translatey(-150px); opacity: 1 }
    40% { -webkit-transform:  translatey(-340px); opacity:0.5;} 
    50% { -webkit-transform:  translatey(-340px); opacity:0;} 
    100% { -webkit-transform:  translatey(-340px); opacity: 0; } 
}

我知道这很乱，但请帮忙。

Answer 1

你搞砸了关键帧......你错过了“@-moz-keyframes glowleft”部分:

试试这个:

@-moz-keyframes glowleft { 
1%{ -moz-transform:  translatey(-20px);opacity:0.5;}
2%{ -moz-transform:  translatey(-20px);opacity:1;}
13% { -moz-transform:  translatey(-150px); opacity: 1 }
40% { -moz-transform:  translatey(-340px); opacity:0.5;} 
50% { -moz-transform:  translatey(-340px); opacity:0;} 
100% { -moz-transform:  translatey(-340px); opacity: 0; } 
}
@-webkit-keyframes glowleft { 
1%{ -webkit-transform:  translatey(-20px);opacity:0.5;}
2%{ -webkit-transform:  translatey(-20px);opacity:1;}
13% { -webkit-transform:  translatey(-150px); opacity: 1 }
40% { -webkit-transform:  translatey(-340px); opacity:0.5;} 
50% { -webkit-transform:  translatey(-340px); opacity:0;} 
100% { -webkit-transform:  translatey(-340px); opacity: 0; } 
}
@keyframes glowleft { 
1%{ transform:  translatey(-20px);opacity:0.5;}
2%{ transform:  translatey(-20px);opacity:1;}
13% { transform:  translatey(-150px); opacity: 1 }
40% { transform:  translatey(-340px); opacity:0.5;} 
50% { transform:  translatey(-340px); opacity:0;} 
100% { transform:  translatey(-340px); opacity: 0; } 
}