HTML5转换HTML5进度条元素

Question

我正在使用这里描述的进度条:

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

使用<progress>元素并使用伪类-webkit-progress-bar和样式设置它 -webkit-progress-value.

所以现在我想要动画progress-value,无论何时更新.

在我的理论中,这应该通过转换其CSS宽度属性来完成,如下所示:

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

但由于某种原因,这似乎不起作用.

Answer 1

transition属性的正确语法是:

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

然后你的value(transition: 5s width;)是错误的,时间和属性被反转,并且缺少定时功能.它应该是(例如):

transition : width 5s ease;

它也应该以crossbrowser为前缀,特别是对于基于WebKit的浏览器,将标准属性保留为最后一个.

-webkit-transition : width 5s ease;
   -moz-transition : width 5s ease;
     -o-transition : width 5s ease;
        transition : width 5s ease;

这是一个错误,但它可能不足以使它工作(你可能有其他错误); 在这种情况下,你需要通过提供一个编辑您的问题提琴表明您已经尝试什么,让我们明白其中的其他问题.