![](/img/trans.png)
[英]CSS animation works in chrome but not in firefox and Safari
[英]CSS-Animation works in Chrome and Safari, but not Firefox and IE
我使用我页面上显示的动画。 它适用于Chrome和Safari(webkit-Browser),但不适用于Firefox(moz),也适用于Internet Explorer。 我不知道为什么,但这是我的代码:
#Area {
-webkit-animation: WriteText 2s;
-moz-animation: WriteText 2s;
animation: WriteText 2s;
}
@-webkit-keyframes WriteText {
0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; }
........
100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}
@-moz-keyframes WriteText {
0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; }
........
100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}
@keyframes WriteText {
0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; }
5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; }
........
100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; }
}
CSS的其他功能在每个浏览器中都能正常工作,特定于浏览器的部分的内容与动画相同,所以我不知道为什么它不起作用。
我已经尝试过这样写:
#Area {
-webkit-animation-name: WriteText;
-webkit-animation-duration: 2s;
-moz-animation-name: WriteText;
-moz-animation-duration: 2s;
animation-name: WriteText;
animation-duration: 2s;
}
但它对我没有帮助。
查看您提供的链接上的CSS文件,在-moz-animation-name和-moz-animation-duration之后缺少分号:
#NavigationArea .ImgAni {
position: relative;
width: 1000px;
height: 263px;
background: #E0FFFF url('../media/header/header.jpg');
opacity: 1;
background-size: 1000px 263px;
-webkit-animation-name:WriteText;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 3s;
-moz-animation-name: WriteText /* missing semicolon here */
-moz-animation-delay: 1s;
-moz-animation-duration: 3s /* missing semicolon here */
animation-name:WriteText;
animation-delay: 1s;
animation-duration: 3s;
}
这导致非Webkit浏览器无法获取动画名称。 尝试添加这些分号并报告回来。 或者你可以完全删除那些带有moz前缀的动画行,因为那些是唯一缺少分号并且Firefox甚至不使用它们的行。 只是-webkit动画和动画应该做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.