React Element Grid Hover Animation

<div className="max-w-screen-2xl">
   <div className="flex flex-wrap">
    {Array.from({ length: 400 })
      .fill(0)
      .map((_, i) => (
      <div
        key={i.toString()}
        className="animated-item h-16 w-16 rounded-md border-[0.1px] border-black/20 transition-all duration-500 ease-linear hover:bg-primary"
      />
    ))}
  </div>
</div>

style.css

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated-item {
  animation: fadeIn 0.5s ease-in-out;
  opacity: 0;
}

.animated-item:hover {
  animation: none; /* Disable animation on hover if needed */
  opacity: 1;
}