Режим заливки анимации «вперед», перезапись: активный стиль

Question

В настоящее время я занимаюсь разработкой темы css для YouTube.com и столкнулся с определенной проблемой:

Анимация, которую я применил для кнопок, настроена на режим заполнения "вперед" "так что он остается в своем последнем кадре. Однако выполнение этого перезаписывает любой стиль, который я применяю с: active правилом.

Как мне обойти это?

@keyframes button_hoverin {
 from { background: white; }
 to { background: red; }
}

@keyframes button_hoverout {
 from { background: red; }
 to { background: white; }
}

#button {
 animation: button_hoverout 0.5s forwards;
}

#button:hover {
    animation: button_hoverin 0.5s forwards;
}

#button:active {
 	background: blue !important; /* even with "!important" it's overwritten.*/
}

<button id="button">Button sample</button>

Answer 1

Вы можете просто сбросить animation-fill-mode в :active:

@keyframes button_hoverin {
  from { background: white; }
  to { background: red; }
}

@keyframes button_hoverout {
  from { background: red; }
  to { background: white; }
}

#button {
  animation: button_hoverout 0.5s forwards;
}

#button:hover {
  animation: button_hoverin 0.5s forwards;
}

#button:active {
  background: blue;
  animation-fill-mode: none;
}

<button id="button">Button sample</button>

Однако обратите внимание, что Chrome на macO не запускается вообще при анимации (возможно, из-за проблем с системными цветами. См. здесь *) 1012 * для получения дополнительной информации).