Tengo esta pieza de css pero quiero cambiar el ancho en el fotograma clave con una variable en javascript. ¿Cómo puedo hacer eso?
@keyframes test { 100% { width: 100%; } }¿Tiene que ser una animación de fotogramas clave? Por lo general, usaría la propiedad de transition CSS para este tipo de animación impulsada por JavaScript, como esta:
var width = 50; document.getElementById('button').addEventListener('click', () => { width += 50; document.getElementById('box').style.width = `${width}px`; }); #box { background: red; height: 50px; width: 50px; transition: width .5s; margin-bottom: 1em; } <div id="box"></div> <button id="button">Change Width</button>Si tiene una animación más general (que no se puede abarcar simplemente haciendo una transición), puede usar JS para establecer una variable CSS.
Tomando el ejemplo en la pregunta, reemplace el 100% con una variable:
@keyframes test { 100% { width: var(--bg); } }y el Javascript tendrías algo como:
thediv.style.setProperty('--bg', '60px');@JohnUleis ya respondió correctamente. llegué demasiado tarde Pero agrego solo por diversión una solución. Se llama: ¿Qué tan lejos está Rom? ;-)
Salud
let root = document.documentElement; const div = document.querySelector('div'); root.addEventListener("mousemove", e => { div.style.setProperty('--width', e.clientX + "px"); div.innerHTML = e.clientX + ' km'; }); :root { --width: 100%; } div { background: hotpink; width: var(--width); text-align: center; color: white; } <div>how far is rom?</div>