Tengo un código para que cuando se presione la tecla c, la saturación aumente y cuando se levante la tecla c, volverá a la normalidad. Me pregunto cómo puedo hacer que en lugar de cambiar instantáneamente el nivel de saturación, la saturación cambie gradualmente a lo largo de medio segundo y cuando se levante la tecla c, la saturación disminuirá gradualmente a lo largo de medio segundo de regreso a el nivel normal de saturación. ¿Cómo se puede hacer esto? Código actual:
document.addEventListener("keydown", e => { if (e.code === "KeyC") { document.body.style.filter = "saturate(1.7)"; } }, false) document.addEventListener("keyup", e => { if (e.code === "KeyC") { document.body.style.filter = ""; } }, false)Usaría una transición CSS para obtener el cambio gradual. Luego, en lugar de establecer el valor de saturación con javascript, puede hacer .classList.add('saturated') y .classList.remove('saturated') en el elemento. Hice un ejemplo con un div:
#myDiv{ width:200px; height:200px; background-color: lightblue; filter: saturate(1); transition: filter 1s ease; } #myDiv.saturated { filter: saturate(4); }aquí hay un ejemplo de trabajo en JSFiddle: https://jsfiddle.net/martinnester/07fsL2ge/20/