I have a component which use a CSS animation. Each instance of the component needs to have a staggered animation, which is achieved by setting the instance index on mount. Is it possible to replicate a similar result without the JS?

import { useEffect, useState } from "react"

let blobCount = 0

const Blob = () => {

    const [instance, setInstance] = useState(0)

    useEffect(() => {
        setInstance(++blobCount)
        return () => {
          blobCount--
        }
      }, [])

    return (
        <div style={{
            animationDelay: `${(Math.floor(instance/-2) * 2500)}ms`,
        }}
        className="animate-pulse" />
    )
}

export default Blob