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 property的正确语法是：

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

那么你的值（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;

这是一个错误，但它可能不足以让它工作（你可能有其他错误）;在这种情况下，您需要通过提供fiddle来显示您尝试过的内容来编辑您的问题，并让我们了解其他问题所在。