我试图使用webkit动画fillmode实现类似进度条的设计，但是它在Firefox中不支持。
我已尝试将％value更改为px的解决方案，但仍不支持。
<!doctype html>
<html>
<head>
<style rel="stylesheet">
#progressbar {
background-color: #e3e5e6;
border-radius: 8px;
padding: 0px;
width: 400px;
}
#progressbar div {
background-color: #afd163;
height: 10px;
width:0%;
border-radius: 5px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div id="progressbar">
<div></div>
</div>
</body>
</html>
编辑：对不起，我的错误。您的问题不是供应商前缀-这是一个简单的缺少右括号的情况：
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
这将起作用;）。Firefox当前不支持非前缀动画属性。
话虽如此，您仍可能希望使用其他供应商前缀来确保安全-您不能保证每个人都在保持其Firefox或其他浏览器为最新。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句