Question

我尝试使用webkit动画fillmode实现像进度条这样的设计，但它在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>

Answer 1

编辑：抱歉我的错误。您的问题不是供应商前缀 - 它是一个简单的缺失结束括号：

@-webkit-keyframes loadbar {
  0% {
     width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes loadbar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

这将有效;）。 Firefox目前支持非前缀动画属性。

话虽如此，您可能仍然希望使用其他供应商前缀来保证安全 - 您无法保证每个人都保持其Firefox或其他浏览器的最新状态。

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

1 个答案: