Tailwind animate-ping inline in a button, play once

index.jsx

<button className="flex content-center items-center justify-center rounded-full border-2 border-transparent bg-sky-800 py-2 px-3 text-base leading-normal text-sky-100 outline-none hover:bg-opacity-80 focus:ring-1 focus:ring-offset-2 active:ring-0 active:ring-offset-0 disabled:cursor-not-allowed disabled:bg-opacity-50">
  <span className="mx-1">Alle</span>
  <span className="relative inline-flex">
    <span className="mr-1 flex rounded-full bg-sky-500 px-2 py-1 text-xs font-bold uppercase">
      {filtercount}
    </span>
    <span
      className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"
      style={{
        animationIterationCount: 1,
        animationFillMode: "forwards",
      }}
    ></span>
  </span>
  <span className="mr-1 flex-auto text-left font-semibold">
    filters verwijderen
  </span>
</button>