谷歌恐龙项目：如何用SCSS/JS实现仙人掌动画时长与延迟随机化

由于SCSS是预编译工具，无法生成运行时的随机值，所以需要通过JavaScript配合CSS来实现动画参数的随机化，以下是两种可行方案：

方案1：直接用JavaScript设置动画属性 #

先简化CSS类，只保留固定的动画规则：

.cactus-anim {
    animation-name: cactus-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes cactus-move {
    0% {
        left: 700px;
    }
    100% {
        left: -40px;
    }
}

再用JavaScript为每个仙人掌元素动态生成随机的时长和延迟：

// 生成指定区间的随机数
function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

// 处理页面中已有的仙人掌元素
const cacti = document.querySelectorAll('.cactus-anim');
cacti.forEach(cactus => {
    const randomDuration = `${getRandom(1, 2)}s`;
    const randomDelay = `${getRandom(0, 0.7)}s`;
    
    cactus.style.animationDuration = randomDuration;
    cactus.style.animationDelay = randomDelay;
});

// 如果游戏中会动态生成新仙人掌，在创建元素时同步设置参数
function createCactus() {
    const cactus = document.createElement('div');
    cactus.classList.add('cactus-anim');
    // 这里可添加仙人掌的其他样式/逻辑
    
    const randomDuration = `${getRandom(1, 2)}s`;
    const randomDelay = `${getRandom(0, 0.7)}s`;
    cactus.style.animationDuration = randomDuration;
    cactus.style.animationDelay = randomDelay;
    
    document.body.appendChild(cactus);
}

方案2：CSS变量 + JavaScript（更易维护） #

用CSS变量承载动态参数，让CSS结构更清晰：

.cactus-anim {
    animation: cactus-move var(--duration) var(--delay) linear infinite;
}

@keyframes cactus-move {
    0% {
        left: 700px;
    }
    100% {
        left: -40px;
    }
}

再通过JavaScript为每个元素赋值CSS变量：

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

// 处理已有仙人掌
document.querySelectorAll('.cactus-anim').forEach(cactus => {
    cactus.style.setProperty('--duration', `${getRandom(1, 2)}s`);
    cactus.style.setProperty('--delay', `${getRandom(0, 0.7)}s`);
});

// 动态生成仙人掌时的逻辑
function createCactus() {
    const cactus = document.createElement('div');
    cactus.classList.add('cactus-anim');
    
    cactus.style.setProperty('--duration', `${getRandom(1, 2)}s`);
    cactus.style.setProperty('--delay', `${getRandom(0, 0.7)}s`);
    
    document.body.appendChild(cactus);
}

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