本文介绍了如何使用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();});
完整示例代码：
Random Animation Time .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; }}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();});
注意事项：
确保在JavaScript代码执行之前，HTML元素已经加载完成。可以使用window.onload事件或将标签放在
以上就是创建随机CSS动画时间：JavaScript动态控制动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513229.html
微信扫一扫 
支付宝扫一扫 
