本教程详细介绍了如何利用css的@keyframes和animation属性为html元素创建视觉上的抖动效果。文章不仅涵盖了抖动动画的定义与应用，还进一步讲解了如何通过javaScript动态触发和控制动画的持续时间，实现类似“函数调用”的灵活交互，并提供了完整的代码示例和实践建议。
1. 理解抖动效果的需求与原理
在用户界面设计中，抖动效果常用于吸引用户注意、表示错误输入或突出显示特定元素。实现这种效果的核心是利用CSS的动画能力，通过在短时间内快速改变元素的位置和旋转角度来模拟抖动。
css动画主要依赖两个关键部分：
- @keyframes 规则：定义动画的各个阶段（关键帧），指定元素在不同时间点的样式。
- animation 属性：将定义的@keyframes动画应用到html元素上，并控制动画的播放方式（如持续时间、重复次数、延迟等）。
2. 定义抖动动画：@keyframes
首先，我们需要定义一个名为shake的@keyframes规则。这个规则将指定元素在动画周期内如何进行位移（translate）和旋转（rotate），从而产生抖动感。
立即学习“Java免费学习笔记（深入）”；
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
代码解析：
- @keyframes shake：定义了一个名为shake的动画。
- 0%到100%：表示动画从开始到结束的进度。
- transform: translate(x, y) rotate(angle)：
- translate(x, y)：使元素在X轴和Y轴上移动指定的像素。通过在不同百分比处设置不同的x和y值，模拟随机的位移。
- rotate(angle)：使元素旋转指定的角度。通过在不同百分比处设置正负角度，增加抖动的真实感。
这个@keyframes定义了一个0.5秒的快速抖动循环。
3. 应用动画到HTML元素
要将上述定义的shake动画应用到特定的HTML元素上，我们可以创建一个CSS类。这个类将包含animation属性，用于指定动画的名称、持续时间、重复次数等。
/* 示例元素的基础样式 */ #myDiv { background-color: #007bff; color: white; height: 100px; width: 200px; display: flex; justify-content: center; align-items: center; margin: 50px auto; border-radius: 5px; font-family: sans-serif; } /* 包含抖动动画的CSS类 */ .shake-active { /* 应用shake动画，每次循环0.1秒，重复30次，总计3秒 */ animation: shake 0.1s 30; /* 动画结束后保持最终状态，或直接移除类以恢复 */ /* animation-fill-mode: forwards; */ }
animation属性详解：
- animation-name: shake，指定要播放的@keyframes动画名称。
- animation-duration: 0.1s，指定动画一个循环的持续时间。这里我们把单个抖动周期设置得很短，以实现更快的抖动频率。
- animation-iteration-count: 30，指定动画的重复次数。由于单个抖动周期是0.1秒，重复30次将使整个抖动效果持续3秒（0.1s * 30 = 3s），符合“持续约3秒”的需求。
- animation-fill-mode: forwards（可选），动画结束后，元素将保持其动画结束时的样式。如果希望动画结束后元素恢复原样，则可以省略此属性，或在javascript中移除shake-active类。
4. HTML结构示例
为了演示，我们创建一个简单的HTML页面，包含一个用于触发抖动的按钮和一个将要抖动的div元素。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML元素抖动效果</title> <style> /* 将上述CSS代码粘贴到这里 */ #myDiv { background-color: #007bff; color: white; height: 100px; width: 200px; display: flex; justify-content: center; align-items: center; margin: 50px auto; border-radius: 5px; font-family: sans-serif; font-size: 1.2em; } .shake-active { animation: shake 0.1s 30; /* 0.1秒一个循环，重复30次，总计3秒 */ } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } button { display: block; margin: 20px auto; padding: 10px 20px; font-size: 1em; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 5px; } </style> </head> <body> <div id="myDiv">我将抖动！</div> <button id="shakeButton">点击我抖动</button> <script> // JavaScript代码将在此处添加 </script> </body> </html>
5. 动态触发抖动效果（模拟“调用函数”）
CSS动画本身是声明式的，不能像JavaScript函数一样直接“调用”。但我们可以通过JavaScript动态地添加或移除包含动画定义的CSS类来模拟这种“调用”行为。
为了实现“持续约3秒”并自动停止，我们将利用JavaScript监听动画结束事件。
const myDiv = document.getElementById('myDiv'); const shakeButton = document.getElementById('shakeButton'); shakeButton.addEventListener('click', () => { // 确保在添加新动画前移除旧的类，防止重复触发导致问题 myDiv.classlist.remove('shake-active'); // 强制浏览器重绘，以便动画能重新开始 void myDiv.offsetWidth; // 添加 shake-active 类来触发抖动动画 myDiv.classList.add('shake-active'); }); // 监听动画结束事件 myDiv.addEventListener('animationend', (event) => { // 确保只处理我们定义的shake动画 if (event.animationName === 'shake') { // 动画结束后移除 shake-active 类，使元素恢复原样 myDiv.classList.remove('shake-active'); } });
JavaScript代码解析：
- 获取dom元素：通过document.getElementById获取div和button元素。
- 按钮点击事件监听：当点击shakeButton时，执行以下操作：
- 动画结束事件监听：
- myDiv.addEventListener(‘animationend’, …)：监听myDiv上的animationend事件。当任何CSS动画完成一个循环或完全结束时，都会触发此事件。
- if (event.animationName === ‘shake’)：确保我们只处理名为shake的动画结束事件，避免影响其他可能的动画。
- myDiv.classList.remove(‘shake-active’)：动画结束后，移除shake-active类。这样，元素将停止抖动并恢复其原始状态，等待下一次触发。
6. 注意事项与最佳实践
- 性能考量：transform属性的动画通常由GPU加速，性能较好。但过度频繁或在大量元素上同时使用复杂动画仍可能影响页面性能。
- 用户体验与无障碍性：
- 抖动动画可能对某些用户（如患有前庭疾病或对运动敏感的用户）造成不适。
- 避免过度使用，仅在必要时（如错误提示）使用。
- 考虑为用户提供关闭动画的选项，或通过CSS媒体查询@media (prefers-reduced-motion)来提供简化的体验。
- 浏览器兼容性：@keyframes和animation属性在现代浏览器中支持良好。对于旧版浏览器，可能需要添加供应商前缀（如-webkit-），但现在通常不再是必需。
- 动画持续时间与频率：根据实际需求调整animation-duration和animation-iteration-count。快速、短促的抖动（如0.1s循环）配合多次重复，通常比慢速、长时间的单次抖动效果更佳。
- 动画库：对于更复杂或需要更精细控制的动画，可以考虑使用现有的JavaScript动画库（如GSAP、Anime.js）或CSS动画库（如Animate.css）。
通过以上步骤，您已经掌握了如何使用CSS和JavaScript为HTML元素创建动态且可控的抖动效果。这种方法不仅提供了视觉反馈，还通过JavaScript实现了灵活的事件触发机制。