I'm a frontend beginner studying Javascript and CSS animations.
I'm trying to make an element to blink according to a rythm (1 beat/second) and already synchronized the beat with the blink. I also would like to make this element to be clickable and act like a button to call a function when pressed. But this element must be clickable only in the beginning of the animation, when opacity is still >= 0.8.
I've tried to do that with visibility (hidden/visible), but it didn't work like I expected. So I'm trying it now with opacity.
Is it possible?
If I specify percentage (like 20%) to change opacity, what would be the syntax to access the percentage? element.style.opacity[??]
// 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; }
}
You could control the blinking with transition and js instead of a keyframes animation. This way you have more fine grain control over the blinking and timing of music. You can also disable the button when not in a "blinky" state.
If you have any questions please ask.
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>If you want to do it in css use pointer-events: none to prevent users from interacting with your element. When the animation is at 20% the opacity will be 0.8;
@keyframes blink-animation {
0% {
opacity: 1;
}
20% {
pointer-events: none;
}
100% {
opacity: 0;
}
}