Стили анимации CSS переопределяют встроенный стиль элемента, почему? ⇐ CSS

[Anonymous]

В настройке с холстом, который имеет ширину по умолчанию, необязательную ширину, рассчитанную и установленную с помощью JavaScript как встроенный стиль и необязательную анимированную ширину, я заметил, что стиль анимации имеет приоритет над встроенным стилем.
Почему?
Я думал, что встроенные стили всегда будут иметь самый высокий специфичность (см.: https://developer.mozilla.org/en-US/doc ... ine_styles).
Этот вопрос пытается определить аргументацию «почему CSS ведет себя таким образом в этом случае» и призывает найти соответствующий источник. Я не ищу ответы на обходные пути или каким-либо образом решаю возникшую проблему.

Код: Выделить всё

.test  {
width: 200px;
height: 50px;
background-color: red;
}

@keyframes pulse {
0% {
width: 50px;
}

100% {
width: 200px;
}
}

.pulse {
animation: pulse 5s linear infinite alternate;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... -style-why