本文介绍了如何使用 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. 调用函数并应用到元素
最后，在适当的时机调用 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();注意事项：
- 确保在 HTML 中定义了 CSS 动画的关键帧 (@keyframes)。
- 在 JavaScript 中，使用模板字符串 (`) 来动态构建animation` 属性的值。
- 可以根据需要调整 randNum 函数的参数，以控制随机动画时间的范围。
- 如果需要更复杂的动画效果，可以考虑使用 JavaScript 动画库，例如 GreenSock (GSAP) 或 Anime.js。
总结：
通过结合 CSS 动画和 JavaScript 随机数生成，可以轻松地创建具有随机动画效果的网页元素。这种方法可以为用户界面添加更多的动态性和趣味性，从而提升用户体验。 使用 JavaScript 动态控制 CSS 动画属性，可以为网页带来更灵活和生动的视觉效果。
