Is it possible to access a specific moment in CSS animation?-CodePudding

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; }
    }

CodePudding user response：

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>

CodePudding user response：

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;
    }
}