Soy un principiante de frontend que estudia animaciones Javascript y CSS. Estoy tratando de hacer que un elemento parpadee según un ritmo (1 latido/segundo) y ya sincronicé el latido con el parpadeo. También me gustaría hacer que se pueda hacer clic en este elemento y actúe como un botón para llamar a una función cuando se presiona. Pero solo se debe poder hacer clic en este elemento al comienzo de la animación, cuando la opacidad aún es >= 0.8.
Intenté hacerlo con visibilidad (oculto/visible), pero no funcionó como esperaba. Así que lo estoy intentando ahora con opacidad. ¿Es posible?
Si especifico un porcentaje (como 20%) para cambiar la opacidad, ¿cuál sería la sintaxis para acceder al porcentaje? elemento.estilo.opacidad[??]
// Javascript code: element.classList.add('blink'); // CSS code: .blink { animation-name: blink-animation; animation-duration: 1000ms; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-fill-mode: forwards; } @keyframes blink-animation { from { opacity: 1; } to { opacity: 0; } }Puede controlar el parpadeo con transición y js en lugar de una animación de fotogramas clave. De esta manera, tiene un control más fino sobre el parpadeo y el tiempo de la música. También puede deshabilitar el botón cuando no esté en un estado "parpadeante".
Si tiene alguna pregunta, por favor pregunte.
const btn = document.querySelector("button"); const wait = ms => new Promise(r => setTimeout(r, ms)); (async () => { while (true) { btn.classList.add("blink"); btn.disabled = false; await wait(1000); btn.classList.remove("blink"); btn.disabled = true; await wait(1000); } })(); btn.addEventListener("click", () => { console.log("clicked!"); }); button { transition: box-shadow 0.2s, opacity 0.2s; opacity: 0.5; } button.blink { box-shadow: 0 0 3px 2px pink; opacity: 1; } <button disabled="true">Blinky</button>Si desea hacerlo en css, use pointer-events: none para evitar que los usuarios interactúen con su elemento. Cuando la animación esté al 20% la opacidad será 0.8 ;
@keyframes blink-animation { 0% { opacity: 1; } 20% { pointer-events: none; } 100% { opacity: 0; } }