在 next.js 中应用 animate-bounce(tailwind-css) 后的 mapbox 标记问题

Question

我尝试在地图中的标记上应用动画 animate-bounce。但是当我尝试应用动画时，标记飞到了页面顶部。它不在提供的经度和纬度中。

应用动画之前

应用动画后

import * as React from "react";
import { useEffect, useRef } from "react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { getCenter } from "geolib";

export default function Map({ searchResults }) {
  const mapContainer = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken =
      "your_access_code";

    const coordinates = searchResults.map((results) => ({
      longitude: results.long,
      latitude: results.lat,
    }));
    const center = getCenter(coordinates);

    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "your_custome_style_map",
      center: [center.longitude, center.latitude],
      zoom: 10,
    });

    

    searchResults.map((result) => {
      const customMarker = document.createElement("div");
  customMarker.innerHTML = "📌";
  customMarker.style.fontSize = "24px";

// The style animate-bounce animation isn't working
customMarker.className = "animate-bounce";

      const { long, lat } = result;
      const marker = new mapboxgl.Marker({element: customMarker}).setLngLat([long, lat]).addTo(map);

      const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(
        `<h3>${result.title}</h3><p>${result.description}</p>`
      );
      marker.setPopup(popup);
    });

    return () => {
      map.remove();
    };
  }, []);

  return <div ref={mapContainer} className="w-[100%] h-[100%]" />;
}