HTML5进度条元素的CSS3过渡

Question

我正在使用进度条，如下所述：

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

使用<progress>元素并使用伪类-webkit-progress-bar和-webkit-progress-value样式。

因此，现在我想为progress-value设置动画，无论何时更新。

在我的理论中，这应该通过转换其CSS width属性来实现，如下所示：

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

但是由于某种原因，这似乎不起作用。

Answer 1

transition属性的正确语法为：

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;