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

你搞砸了关键帧......你错过了＆＃34; @ - moz-keyframes glowleft＆＃34;部分：

试试这个：

@-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; } 
}

翻译不适用于Firefox，请问有谁知道为什么？

1 个答案: