Я использую индикатор выполнения, как описано здесь:
Используя элемент <progress> и -webkit-progress-bar его с псевдо-классами -webkit-progress-bar и -webkit-progress-value.
Поэтому теперь я хочу оживить progress-value, когда он обновляется.
В моей теории это должно работать через переход с атрибутом ширины CSS следующим образом:
progress::-webkit-progress-value {
transition: 5s width;
}
Но почему-то это не работает.
Правильный синтаксис для свойства перехода :
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;