React中CSS animation-delay属性失效问题求助

核心问题：CSS选择器错误 #

你将父容器类--loaderContainer同时用于父容器和子元素，导致:nth-child(n)选择的是父容器的同级元素，而非容器内部的子元素，这是animation-delay不生效的根本原因。此外还有几处语法和逻辑问题，具体修复如下：

1. 修正DOM结构与CSS选择器 #

父容器单独使用--loaderContainer类，内部子元素使用新类名（如--loaderCircle），确保选择器能正确定位子元素：

// React组件示例
function Loader() {
  return (
    <div className="--loaderContainer">
      <div className="--loaderCircle"></div>
      <div className="--loaderCircle"></div>
      <div className="--loaderCircle"></div>
      <div className="--loaderCircle"></div>
    </div>
  );
}

2. 修复CSS代码 #

.--loaderContainer {
    position: relative;
    left: 50%;
    top: 50%;
    /* 修正transform语法：去掉错误的逗号 */
    transform: translateX(-50%) translateY(-50%);
    width: 4rem;
    height: 4rem;
}

/* 正确选择容器内的子元素 */
.--loaderContainer .--loaderCircle {
    /* 用CSS变量存储旋转角度，复用动画 */
    --rotate: 0deg;
    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 .--loaderCircle:first-child {
    background-color: red;
    --rotate: 270deg;
    animation-delay: -1.5s;
}

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

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

.--loaderContainer .--loaderCircle:nth-child(4) {
    background-color: yellow;
    --rotate: 0deg;
}

@keyframes spin {
    0%,
    100% {
        /* 合并旋转与位移，避免动画覆盖初始旋转 */
        transform: rotate(var(--rotate)) translate(0);
    }
    25% {
        transform: rotate(var(--rotate)) translate(160%);
    }
    50% {
        transform: rotate(var(--rotate)) translate(160%, 160%);
    }
    75% {
        transform: rotate(var(--rotate)) translate(0, 160%);
    }
}

关键修复点说明 #

• 选择器修正：通过.--loaderContainer .--loaderCircle正确选中容器内的子元素，确保animation-delay规则作用到目标元素上。
• transform语法修复：父容器的transform属性不能用逗号分隔多个函数，改为空格分隔。
• transform覆盖问题：动画中的transform会覆盖初始样式，通过CSS变量合并旋转与位移，保证子元素的初始旋转角度在动画过程中保留。

内容的提问来源于stack exchange，提问作者LiamN