How to make Animation Icon in HTML, CSS and JavaScript ?\(-_-)/

To create an animated icon using HTML, CSS, and JavaScript, you can follow these steps:

1. Create the HTML markup for the icon using an appropriate tag, such as a div or an svg.

2. Define the initial styles for the icon using CSS. For example, you can set the initial position, size, and color of the icon.

3. Use JavaScript to add an event listener to the icon and define the animation logic. For example, you can use the setInterval or setTimeout function to change the position, size, or color of the icon over time.

4. You can use CSS animation keyframes to animate the icon, which will be controlled by JavaScript, or you can use JavaScript libraries such as anime.js or GSAP to animate the icon.

Here is a basic example of an animated icon using CSS keyframes:

<div class="icon">
  <div class="icon__inner"></div>
</div>

.icon {
  position: relative;
  width: 50px;
  height: 50px;
}

.icon__inner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

// javascript is not necessary for this example

This is just a basic example, you can adjust it according to your requirement and also use javascript to control the animation.