本文介绍了如何使用JavaScript动态地控制CSS动画的animation-duration和animation-delay属性，以实现随机的动画效果。通过JavaScript生成随机数并将其应用到CSS样式中，可以为网页元素创建更生动、更自然的动画表现。主要针对需要增加动画随机性的开发者，提供了一种简单有效的解决方案。
在CSS中直接实现动画时间的随机性是有限的，但我们可以借助JavaScript来动态地修改元素的CSS样式，从而达到随机控制动画时间的目的。以下是如何使用JavaScript实现这一功能的详细步骤和示例代码。
1. 获取需要动画的元素
首先，需要使用JavaScript获取需要添加动画效果的HTML元素。可以使用document.querySelector()或document.getElementById()等方法来选择元素。
立即学习“Java免费学习笔记（深入）”；
const anim = document.querySelector(".cactus-anim"); // 假设元素类名为"cactus-anim"2. 创建生成随机数的函数
创建一个函数，用于生成指定范围内的随机数。这个函数将用于生成动画的持续时间和延迟时间。
function randNum(min, max) {
return Math.random() * (max - min) + min;
}这个函数接受两个参数：min（最小值）和max（最大值），并返回一个介于这两个值之间的随机数。
3. 创建设置随机动画时间的函数
创建一个函数，用于设置元素的动画时间和延迟。这个函数将调用randNum()函数生成随机数，并将这些随机数应用到元素的animation属性中。
function randAnimTime() {
// 设置新的动画时间
// 第一个随机数在1到2秒之间
// 第二个随机数在0到0.7秒之间
anim.style.animation = "cactus-move " + randNum(1, 2) + "s " + randNum(0, 0.7) + "s linear infinite";
}在这个函数中，anim.style.animation属性被设置为一个新的字符串，该字符串包含了动画名称（cactus-move）、随机的持续时间、随机的延迟时间和动画的其他属性（linear infinite）。
4. 调用函数来应用随机动画时间
在需要应用随机动画时间的地方调用randAnimTime()函数。例如，可以在页面加载完成后调用该函数，或者在特定的事件触发时调用该函数。
// 页面加载完成后调用
window.onload = function() {
randAnimTime();
};
// 或者在点击按钮时调用
document.getElementById("randomizeButton").addEventListener("click", function() {
randAnimTime();
});完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Random Animation Time</title>
<style>
.cactus-anim {
width: 50px;
height: 50px;
background-color: green; /* 示例样式 */
position: relative;
animation-name: cactus-move;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cactus-move {
0% {
left: 700px;
}
100% {
left: -40px;
}
}
</style>
</head>
<body>
<div class="cactus-anim"></div>
<button id="randomizeButton">Randomize Animation</button>
<script>
const anim = document.querySelector(".cactus-anim");
function randNum(min, max) {
return Math.random() * (max - min) + min;
}
function randAnimTime() {
anim.style.animation = "cactus-move " + randNum(1, 2) + "s " + randNum(0, 0.7) + "s linear infinite";
}
window.onload = function() {
randAnimTime();
};
document.getElementById("randomizeButton").addEventListener("click", function() {
randAnimTime();
});
</script>
</body>
</html>注意事项：
- 确保在JavaScript代码执行之前，HTML元素已经加载完成。可以使用window.onload事件或将<script>标签放在</script>
