使用 JavaScript 实现 CSS 动画时间的随机化-js教程-PHP中文网

使用 JavaScript 实现 CSS 动画时间的随机化

花韻仙語

发布： 2025-08-02 15:24:11

原创

747人浏览过

使用 javascript 实现 css 动画时间的随机化

本文介绍了如何使用 JavaScript 动态地改变 CSS 动画的持续时间和延迟，从而实现动画效果的随机化。通过 JavaScript 生成随机数并将其应用于 CSS 动画属性，可以为网页元素创建更生动、更不可预测的动画效果。

在纯 CSS 中，无法直接实现动画时间的随机化。然而，我们可以利用 JavaScript 动态地修改元素的 CSS 样式，从而达到随机化动画时间的目的。以下是如何实现的详细步骤：

1. 获取需要动画的元素

首先，使用 JavaScript 获取需要添加随机动画的元素。例如，如果你的 HTML 中有一个类名为 cactus-anim 的元素，你可以这样获取它：

立即学习“Java免费学习笔记（深入）”；

const anim = document.querySelector(".cactus-anim");

登录后复制

2. 创建生成随机数的函数

接下来，创建一个函数，用于生成指定范围内的随机数。该函数接受最小值和最大值作为参数，并返回一个介于两者之间的随机数。

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

登录后复制

3. 创建更新动画时间的函数

现在，创建一个函数，用于更新元素的动画时间。这个函数将调用 randNum 函数生成随机的持续时间和延迟，并将它们应用于元素的 animation 样式属性。

function randAnimTime() {
    // 生成随机的持续时间（1-2 秒）和延迟（0-0.7 秒）
    const duration = randNum(1, 2);
    const delay = randNum(0, 0.7);

    // 设置新的动画属性
    anim.style.animation = `cactus-move ${duration}s ${delay}s linear infinite`;
}

登录后复制

4. 调用函数并应用到元素

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

最后，在适当的时机调用 randAnimTime 函数，例如在页面加载完成后或在特定的事件触发时。这将为元素应用随机的动画时间。

// 在页面加载完成后调用
window.onload = randAnimTime;

// 或者，在按钮点击时调用
document.getElementById("randomizeButton").addEventListener("click", randAnimTime);

登录后复制

示例代码：

以下是一个完整的示例，展示了如何使用 JavaScript 实现 CSS 动画时间的随机化。

HTML:

<div class="cactus-anim"></div>
<button id="randomizeButton">Randomize Animation</button>

登录后复制

CSS:

.cactus-anim {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    animation: cactus-move 1.3s 0.5s linear infinite; /* 初始值，会被JS覆盖 */
}

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

    100% {
        left: -40px;
    }
}

登录后复制

JavaScript:

const anim = document.querySelector(".cactus-anim");
const randomizeButton = document.getElementById("randomizeButton");

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

function randAnimTime() {
    const duration = randNum(1, 2);
    const delay = randNum(0, 0.7);

    anim.style.animation = `cactus-move ${duration}s ${delay}s linear infinite`;
}

randomizeButton.addEventListener("click", randAnimTime);

// 页面加载时先随机一次
randAnimTime();

登录后复制

注意事项：