webkit-animation-fill-mode 在 Firefox 中不起作用

我尝试使用 webkit 动画填充模式实现像进度条这样的设计，但它在 Firefox 中不支持。

我已经尝试了一些解决方案，例如将%值更改为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 或其他浏览器是最新的。

相关内容

最新更新

热门标签：