My animation is responsive to the number of characters present
It functions properly with 20 characters:
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)
}This works well because 5% corresponds to 1/20
If I modify the text length, the animation speeds up.
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)
}To adjust for this change in text length, I would need to alter 5% to 10% in the @keyframes rule.
I can regulate duration and delay using CSS variables.
Is it possible to do the same for the @keyframes list?