是否可以访问CSS动画中的特定时刻?

Question

我是一个学习Javascript和CSS动画的前端初学者。我正在尝试使一个元素根据一个节奏(1拍/秒)闪烁，并且已经与闪烁同步了。我还想使这个元素是可点击的，并像按钮一样在按下时调用函数。但是这个元素必须只能在动画开始时才可点击，此时不透明度仍然为>= 0.8。
我试过这样做的可见性(隐藏/可见)，但它没有像我预期的工作。所以我现在试着用不透明度。这可能吗?

如果我指定百分比(如20%)来改变不透明度，访问百分比的语法是什么?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; }
}

Answer 1

如果你想在css中这样做，使用pointer-events: none来防止用户与你的元素交互。当动画设置为20%时，不透明度为0.8;

@keyframes blink-animation {
0% {
opacity: 1;
}
20% {
pointer-events: none;
}
100% {
opacity: 0;
}
}

Answer 2

你可以用过渡和js代替关键帧动画来控制闪烁。这样你就可以更精细地控制音乐的闪烁和定时。您也可以在不在"闪烁"时禁用该按钮。状态。

如果你有任何问题，请提出来。

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>