Анимация псевдоэлементов тега progress

Question

Есть проблема с анимацией у тега <progress>. Мне нужно, чтобы анимация выполнялась только у ::webkit-progress-value.

Если я добавляю свойства просто в ::webkit-progress-value, то анимация не воспроизводится.
Если же просто в тег <progress>, то анимация распространяется полностью на этот тег.

progress {
  background-color: #000;
  height: 15px;
  border-radius: 4px;
  width: 100%;
  animation: scale var(--time) forwards;
  transform-origin: left top;
}

progress::-webkit-progress-bar {
  background-color: #20274b;
  height: 15px;
  border-radius: 4px;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: var(--sidebar-gradient-2);
  height: 15px;
  border-radius: 4px;
  --time: 2s;
  animation: scale var(--time) forwards;
  transform-origin: left top;
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    background-color: var(--sidebar-gradient-2);
    transform: scaleX(1);
  }
}

<progress style="--time: 2s;" value="2064" max="4000"></progress>

Answer 1

progress {
  --time: 2s;
  height: 15px; width: 100%;
  border-radius: 4px;
  background-color: #20274b;
  animation: scale-webkit var(--time) forwards;
}

/* Для Chrome, Opera, Edge */
@property --scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}
progress::-webkit-progress-value {
  transform-origin: 0 50%;
  transform: scaleX(var(--scale));
  border-radius: 4px;
  background-color: #fa0;
}
@keyframes scale-webkit { to { --scale: 1; }}

/* Для Firefox */
progress::-moz-progress-bar {
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: 4px;
  background-color: #fa0;
  animation: scale-moz var(--time) forwards;
}
@keyframes scale-moz { to { transform: scaleX(1); }}

<progress value="2064" max="4000"></progress>
<progress value="1000" max="4000"></progress>
<progress value="100" max="4000"></progress>

БЛОГ НА HUSL

Анимация псевдоэлементов тега progress

Ответы (1 шт):