CSS-анимация: отрегулируйте скорость мигания цвета фона с учетом BPM и ударов. ⇐ CSS

[Anonymous]

Я пытаюсь создать «простую» CSS-анимацию, работающую как метроном:

я хотел бы иметь DIV
[*]цвет фона «плавно мигает» с учетом BPM и количества ударов. [*]первая доля должна мигать другим цветом [*]Если возможно, счетчик ударов (текстовое содержимое DIV).
Почему только CSS? потому что я хотел бы узнать, как далеко я могу зайти с этим, и потому что конечная страница останется «простой» (в ней нет файлов javascript или кода, кроме двух переменных «BPM» и «BEATS».< /п> Я пробовал следовать онлайн-примерам и учебникам или ответам здесь, на stackoverflow, но довольно скоро застрял:

.метроном { белый цвет; выравнивание текста: по центру; размер шрифта: 5rem; анимация: темп 2с бесконечный; } @keyframes мигает { 0% {цвет фона: var(--title-bgcolor);} 50% {background-color: var(--lyric_block-bgcolor);} 100% {background-color: var(--title-bgcolor);} } @keyframes темп { 0% {content:"1"; цвет фона: #8FF;} 5% {background-color: #8FF;} 24% {background-color: #000;} 25% {content:"2"; цвет фона: #08F;} 49% {background-color: #000;} 50% {content:"3"; цвет фона: #08F;} 74% {background-color: #000;} 75% {content:"4"; цвет фона: #08F;} 99% {background-color: #000;} 100% {background-color: #8FF;} } (вот код, который я пытался создать)

Я не понимаю, как манипулировать временем анимации и количеством ключевых кадров в соответствии с заданными BPM и BEATS. Но я сильно подозреваю, что мой подход может быть неправильным.

Можно ли это сделать? Как?