web-dev-qa-db-ja.com

HTML5プログレスバー要素のCSS3遷移

ここで説明するように、プログレスバーを使用しています。

http://css-tricks.com/html5-progress-element/

<progress>要素を使用し、疑似クラス-webkit-progress-barおよび-webkit-progress-valueでスタイルを設定します。

だから今、私はそれが更新されるたびにprogress-valueをアニメーション化したい。

私の理論では、これは次のようにCSS幅属性を移行することで機能するはずです。

progress::-webkit-progress-value {
    transition: 5s width;
}

しかし、何らかの理由でこれは機能していないようです。

htmlcssprogress-barcss-transitionscss-animations
16
mr.T

transition property の正しい構文は次のとおりです。

transition: [property] [duration] [timing-function] [delay];

次にあなたの値（transition: 5s width;）が間違っており、タイミングとプロパティが逆になっていて、タイミング機能がありません。それは（例えば）あるべきです：

transition : width 5s ease;

また、特にWebKitベースのブラウザーの場合、クロスブラウザーで機能するようにプレフィックスを付けて、標準プロパティを最後のプロパティとして残す必要があります。

-webkit-transition : width 5s ease;
   -moz-transition : width 5s ease;
     -o-transition : width 5s ease;
        transition : width 5s ease;
6
Andrea Ligios