blink a element in javascript

To blink an element in JavaScript, you can add and remove a CSS class with specific keyframe animation using JavaScript's DOM manipulation methods. Here's an example:

<button id="btn">Click me to blink</button>
44 chars
2 lines

.blink {
  animation: blinker 0.4s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
106 chars
10 lines

index.tsx
const btn = document.getElementById("btn");

function blink() {
  btn.classList.add("blink");
  setTimeout(() => {
    btn.classList.remove("blink");
  }, 2000); // remove the class after 2 seconds
}

btn.addEventListener("click", blink);
239 chars
11 lines

In the above code, we first define a CSS class .blink that animates element to switch between visible and invisible states. Then, in JavaScript, we select the button element and define a function blink() that adds the .blink class to it using classList.add(). After a 2 second timeout, we remove the class using classList.remove() method.

Finally, we add an event listener to the button to call the blink() function when it is clicked.