我使用我页面上显示的动画。它适用于 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-animation 和 animation 就可以了。
关于html - CSS 动画适用于 Chrome 和 Safari,但不适用于 Firefox 和 IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20107295/