如何避免硬编码CSS动画？为SVG各元素设置独立translateY值

方案1：CSS自定义属性（变量）—— 灵活可控，适合中等数量元素 #

通过给每个蜡烛元素设置专属的CSS变量，复用同一个@keyframes规则，避免重复硬编码动画。

修改后的HTML

给每个<line>/<path>添加style属性，定义--translate-y变量指定移动距离：

<svg class="candles" width="1782" height="472" viewBox="0 0 1782 472" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="frame">
    <line id="line-1" style="--translate-y: -128px;" x1="6.5" y1="219.652" x2="6.5" y2="270.117" stroke="#5ABCF3" stroke-width="13"/>
    <line id="line-2" style="--translate-y: -96px;" x1="35.2988" y1="259.74" x2="35.2988" y2="274.583" stroke="#5ABCF3" stroke-width="13"/>
    <line id="line-3" style="--translate-y: -64px;" x1="62.5488" y1="258.266" x2="62.5488" y2="290.919" stroke="#5ABCF3" stroke-width="13"/>
    <path id="line-4" style="--translate-y: -112px;" d="M96.2578 273.045V323.509" stroke="#5ABCF3" stroke-width="13"/>
    <path id="line-5" style="--translate-y: -80px;" d="M123.475 305.76V322.086" stroke="#5ABCF3" stroke-width="13"/>
    <path id="line-6" style="--translate-y: -144px;" d="M153.799 255.301V328.029" stroke="#5ABCF3" stroke-width="13"/>
</g>
</svg>

修改后的CSS

在@keyframes中引用变量，同时给变量设置默认值兼容未定义的元素：

.candles {
      width: -webkit-fill-available;
      transition: all 0.5s;
} 
.candles line, path{
    stroke: #5ABCF3;
    animation-name: candle;
    animation-duration: 4s;   
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: alternate;
    --translate-y: -128px; /* 默认移动距离 */
}
@keyframes candle {
    from { 
        stroke: #5ABCF3;
        transform: translateY(0); /* 初始位置设为0，动画过渡更自然 */
    } 
    to { 
        stroke: blue; 
        transform: translateY(var(--translate-y));
    }
}

新增元素时，只需添加对应的--translate-y变量即可，无需修改CSS代码。

方案2：JavaScript批量生成—— 适合大量元素，自动化配置 #

如果蜡烛数量极多，手动设置变量效率低，可通过JS按规则自动生成每个元素的移动距离：

const candles = document.querySelectorAll('.candles line, .candles path');
candles.forEach((el, index) => {
    // 自定义规则示例：按索引递增，每往后一个元素多移动16px
    const translateY = -128 + index * 16;
    el.style.setProperty('--translate-y', `${translateY}px`);
});

配合方案1的CSS使用，完全无需手动配置每个元素的变量，适合动态生成蜡烛的场景。

方案3：SVG原生动画—— 纯SVG场景，无需CSS #

直接使用SVG的<animate>和<animateTransform>标签，在SVG内部定义每个元素的动画：

<svg class="candles" width="1782" height="472" viewBox="0 0 1782 472" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="frame">
    <line id="line-1" x1="6.5" y1="219.652" x2="6.5" y2="270.117" stroke="#5ABCF3" stroke-width="13">
        <animate attributeName="stroke" from="#5ABCF3" to="blue" dur="4s" repeatCount="indefinite" alternate="true"/>
        <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -128" dur="4s" repeatCount="indefinite" alternate="true"/>
    </line>
    <line id="line-2" x1="35.2988" y1="259.74" x2="35.2988" y2="274.583" stroke="#5ABCF3" stroke-width="13">
        <animate attributeName="stroke" from="#5ABCF3" to="blue" dur="4s" repeatCount="indefinite" alternate="true"/>
        <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -96" dur="4s" repeatCount="indefinite" alternate="true"/>
    </line>
    <!-- 其他蜡烛元素按此格式复制修改即可 -->
</g>
</svg>

这种方法无需依赖CSS，动画逻辑完全封装在SVG内，适合纯SVG的独立场景。

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