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 に答える