CSS3 Переход элемента шага прогресса HTML5

Я использую индикатор выполнения, как описано здесь:

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

Используя элемент <progress> и -webkit-progress-bar его с псевдо-классами -webkit-progress-bar и -webkit-progress-value.

Поэтому теперь я хочу оживить progress-value, когда он обновляется.

В моей теории это должно работать через переход с атрибутом ширины CSS следующим образом:

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

Но почему-то это не работает.

ОТВЕТЫ

Ответ 1

Правильный синтаксис для свойства перехода :

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;