How to Create a Blur Animation in JavaScript?

You can create a blur animation in JavaScript using the CSS filter property and JavaScript to change the value over time. Here’s an example of how you can do this:

1. Create a HTML element that you want to animate, for example a div:

<div class="blur-element"></div>

2. Apply the CSS filter property to the element with the blur value set to 0:

.blur-element {
  width: 100px;
  height: 100px;
  background-color: red;
  filter: blur(0px);
  transition: filter 0.5s ease;
}

3. In JavaScript, you can use the setInterval function to increment the blur value over time:

let blurValue = 0;
setInterval(function() {
  blurValue += 0.5;
  document.querySelector(".blur-element").style.filter = `blur(${blurValue}px)`;
  if (blurValue >= 5) {
    blurValue = 0;
  }
}, 50);

This will create an animation that gradually blurs the element over time, and resets the blur value back to 0 after it reaches 5 pixels. You can adjust the speed of the animation by changing the interval time in the setInterval function.