关于React.js中动画元素的一个快速问题-我注意到，当尝试使用CSS中的animation-delay属性时，React似乎出于某种原因根本不应用这一规则。
例如，我尝试制作一个基本的加载组件，它只有一系列按顺序移动的基本圆圈，其CSS如下所示：

.--loaderContainer {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%), translateY(-50%);
    width: 4rem;
    height: 4rem;
}

.--loaderContainer:nth-child(n) {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    margin: 0;
    padding: 0;
    position: absolute;
    animation-name: spin;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.--loaderContainer:first-child {
    background-color: red;
    transform: rotate(270deg);
    animation-delay: -1.5s;
}

.--loaderContainer:nth-child(2) {
    background-color: blue;
    transform: rotate(180deg);
    animation-delay: -1s;
}

.--loaderContainer:nth-child(3) {
    background-color: green;
    transform: rotate(90deg);
    animation-delay: -0.5s;
}

.--loaderContainer:nth-child(4) {
    background-color: yellow;
}

@keyframes spin {
    0%,
    100% {
        transform: translate(0);
    }
    25% {
        transform: translate(160%);
    }
    50% {
        transform: translate(160%, 160%);
    }
    75% {
        transform: translate(0, 160%);
    }
}

就我所知，这应该是按顺序错开每个子元素，在不同的时间执行相同的动画。然而，出于某种原因，React只是播放动画，没有任何延迟，并在完全相同的时间让所有四个元素都有动画。
这似乎是一个非常基本的问题，虽然我已经寻找了各种答案，我只是似乎不能找到任何具体的解决方案，所以将是超级感谢任何帮助。谢谢！