我正在开发一个新网站,但是当我的 friend 在 Firefox 上测试它时,其中一项功能无法正常工作。
我们发现 css 在 Firefox 中不起作用,但在 Chrome 中却可以工作。
完整代码:https://jsfiddle.net/wvkL6d2b/
我们尝试过 -webkit-和-ms-
#separator{ width: 10px!important; max-width: 60px!important; height: 10px; background:red;}
@keyframes in-out {
from { width: 10px;
}
10%, 100% {
width: 60px;
}
to{ width: 60px; }
}
#separator {
animation-name: in-out;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}
我正在尝试让它在两种浏览器上运行
最佳答案
你写的CSS属性有很多错误。请在 fiddle 中找到更新的代码。 这些应该是要使用的属性。
#separator {
height: 10px;
background: red;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
@-webkit-keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
/* Standard syntax */
@keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
关于css 浏览器兼容性 firefox 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55609248/