0

我曾尝试使用 webkit 动画填充模式来实现类似进度条的设计，但它在 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>
4

1 回答 1

1

编辑：对不起我的错误。您的问题不是供应商前缀 - 它是一个简单的缺少右括号：

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

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

这将起作用;)。Firefox 目前确实支持无前缀动画属性。

话虽如此，您可能仍想考虑使用其他供应商前缀以确保安全 - 您不能保证每个人都将他们的 firefox 或其他浏览器保持在最新状态。

于 2013-11-11T14:16:39.727 回答