Можно ли определить процент @keyfames на основе переменной CSS? ⇐ CSS

[Anonymous]

У меня есть анимация, которая зависит от количества символов.
Она отлично работает с 20 символами:

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

const text = '20 characters length'

const speed = 0.1

const $container = document.querySelector('.wave')

$container.style.setProperty('--duration', `${speed * text.length}s`)

for (const [index, char] of Object.entries([...text])) {
const $el = document.createElement('span')
$el.innerHTML = char === ' ' ? ' ' : char
$el.style.setProperty('--delay', `${index * speed}s`)
$container.appendChild($el)
}

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

div>* {
animation: anim var(--duration) step-start var(--delay) infinite;
display: inline-block;
}

@keyframes anim {
0%, 100% {
translate: 0;
}
5% {
translate: 0 -5px;
}
}

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

но только потому, что 5% — это то же самое, что 1/ 20
Если я изменю длину текста, он будет работать слишком быстро

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

const text = '10 char...'

const speed = 0.1

const $container = document.querySelector('.wave')

$container.style.setProperty('--duration', `${speed * text.length}s`)

for (const [index, char] of Object.entries([...text])) {
const $el = document.createElement('span')
$el.innerHTML = char === ' ' ? ' ' : char
$el.style.setProperty('--delay', `${index * speed}s`)
$container.appendChild($el)
}

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

div>* {
animation: anim var(--duration) step-start var(--delay) infinite;
display: inline-block;
}

@keyframes anim {
0%, 100% {
translate: 0;
}
5% {
translate: 0 -5px;
}
}

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

Мне нужно будет изменить 5% на 10%< /code> в @keyframes

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

const text = '10 char...'

const speed = 0.1

const $container = document.querySelector('.wave')

$container.style.setProperty('--duration', `${speed * text.length}s`)

for (const [index, char] of Object.entries([...text])) {
const $el = document.createElement('span')
$el.innerHTML = char === ' ' ? ' ' : char
$el.style.setProperty('--delay', `${index * speed}s`)
$container.appendChild($el)
}

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

div>* {
animation: anim var(--duration) step-start var(--delay) infinite;
display: inline-block;
}

@keyframes anim {
0%, 100% {
translate: 0;
}
10% {
translate: 0 -5px;
}
}

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

Я могу изменить продолжительность и задержку с помощью переменных CSS.Могу ли я сделать то же самое со списком @keyframes?

Подробнее здесь: https://stackoverflow.com/questions/787 ... s-variable