本教程详细介绍了如何利用css的`@keyframes`和`animation`属性为html元素创建逼真的抖动效果。文章不仅涵盖了抖动动画的css定义、持续时间、重复次数等控制方法，更深入探讨了如何通过javascript动态添加/移除css类，实现“函数式”按需触发抖动效果，并提供了完整的代码示例和最佳实践建议。
理解CSS动画与抖动效果
在网页开发中，CSS动画是实现各种动态视觉效果的强大工具。抖动效果（Shake Animation）通过快速、小幅度的位移和旋转，模拟物体受到冲击或震动时的状态。要实现这种效果，我们主要依赖CSS的@keyframes规则来定义动画的各个阶段，以及animation属性来控制动画的播放方式。
核心原理：CSS @keyframes 定义抖动
@keyframes规则允许我们定义动画在不同时间点的样式。对于抖动效果，我们会在动画的0%到100%之间，通过transform属性不断改变元素的translate（位移）和rotate（旋转）值，从而营造出不规则的晃动感。
以下是一个经典的抖动@keyframes定义：
@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中：
立即学习“前端免费学习笔记（深入）”；
0%到100%代表动画的整个时间线。transform: translate(x, y)用于使元素在水平和垂直方向上进行小幅度的位移。transform: rotate(deg)用于使元素进行小幅度的旋转。通过组合这些微小的、不规则的变化，即可形成视觉上的抖动效果。
应用动画到HTML元素
定义好@keyframes后，我们需要使用animation属性将其应用到目标HTML元素上。animation是一个简写属性，可以同时设置多个动画相关的子属性，包括：
animation-name: 指定要播放的@keyframes名称（例如shake）。animation-duration: 动画持续时间（例如0.5s表示0.5秒）。animation-timing-function: 动画的缓动函数（例如ease-in-out）。animation-delay: 动画开始前的延迟时间。animation-iteration-count: 动画播放次数（例如infinite无限次，或具体数字）。animation-direction: 动画是否应该轮流反向播放。animation-fill-mode: 动画结束后或开始前的状态。
基础示例：持续抖动
为了演示抖动效果，我们可以创建一个简单的div元素，并为其添加样式。
HTML元素抖动效果 body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } #myDiv { background-color: #3498db; height: 150px; width: 150px; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.2em; font-family: sans-serif; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 应用抖动动画 */ animation: shake 0.5s infinite; /* 动画名称 shake, 持续0.5秒, 无限次重复 */ } @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); } }我正在抖动！
动态触发抖动效果（“函数式调用”）
在实际应用中，我们通常需要根据用户的交互或其他事件来触发抖动，而不是让它一直抖动。这类似于“调用一个函数”来执行抖动。实现这一目标最常用的方法是结合JavaScript和CSS类。
步骤1：定义一个包含动画的CSS类
首先，创建一个CSS类（例如is-shaking），它只在需要抖动时才被应用。我们将动画的持续时间设置为3秒，并只播放一次。
/* ... (之前的 @keyframes shake 保持不变) ... */.is-shaking { animation: shake 0.1s ease-in-out 0s 30; /* 0.1s 持续时间，重复30次 = 3秒 */ /* 或者更精确地控制总时长，例如 */ /* animation: shake 3s forwards; */ /* 3秒总时长，动画结束后停留在最终状态 */}
注意：
animation: shake 0.1s ease-in-out 0s 30; 意味着每次抖动周期是0.1秒，重复30次，总共持续3秒。animation: shake 3s forwards; 意味着整个抖动动画持续3秒，并且forwards会使元素在动画结束后保持最后一帧的样式。选择哪种方式取决于你希望抖动是快速重复还是平滑过渡。为了更接近真实的“抖动”，通常选择快速重复小周期。
步骤2：使用JavaScript动态添加/移除CSS类
接下来，我们使用JavaScript来控制这个is-shaking类的添加和移除。
动态触发HTML元素抖动 body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; font-family: sans-serif; } #myDiv { background-color: #3498db; height: 150px; width: 150px; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.2em; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-bottom: 20px; transition: transform 0.05s ease-out; /* 添加一个小的过渡，让抖动停止时更自然 */ } button { padding: 10px 20px; font-size: 1em; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #218838; } /* 抖动动画的 @keyframes */ @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); } } /* 触发抖动效果的CSS类 */ .is-shaking { animation: shake 0.1s ease-in-out 0s 30; /* 0.1秒一个周期，重复30次，总计3秒 */ }点击按钮抖动我const myDiv = document.getElementById('myDiv'); const shakeButton = document.getElementById('shakeButton'); const shakeDuration = 3000; // 抖动持续时间，单位毫秒 (3秒) shakeButton.addEventListener('click', () => { // 检查是否已经在抖动，避免重复触发 if (!myDiv.classList.contains('is-shaking')) { myDiv.classList.add('is-shaking'); // 添加抖动类 // 在指定时间后移除抖动类，停止动画 setTimeout(() => { myDiv.classList.remove('is-shaking'); }, shakeDuration); } });
在上述JavaScript代码中：
我们获取了目标div元素和触发按钮。为按钮添加了一个点击事件监听器。当按钮被点击时，我们首先检查myDiv是否已经包含is-shaking类，以防止动画在进行中被重复触发。如果不在抖动，就通过myDiv.classList.add(‘is-shaking’)添加该类，从而启动CSS动画。使用setTimeout函数，在shakeDuration（3000毫秒，即3秒）后，通过myDiv.classList.remove(‘is-shaking’)移除该类，停止抖动动画。
抖动整个窗口
如果需要让整个HTML窗口（或页面内容）抖动，可以将is-shaking类应用到body元素或一个包裹了所有页面内容的顶级div上。例如：
/* CSS */#page-wrapper { /* 确保它占据整个视口 */ min-height: 100vh; width: 100vw; /* 其他样式 */}#page-wrapper.is-shaking { animation: shake 0.1s ease-in-out 0s 30;}
// JavaScriptconst pageWrapper = document.getElementById('page-wrapper');// ... 像上面一样控制 pageWrapper 的 class
注意事项与最佳实践
性能优化： 在CSS动画中，使用transform属性（如translate、rotate、scale）通常比改变top、left、margin等属性具有更好的性能，因为它能利用GPU加速。本教程的抖动效果正是基于transform。用户体验： 抖动效果可能会对某些用户造成不适，特别是那些对运动敏感或有前庭系统障碍的用户。应谨慎使用，并考虑提供关闭动画的选项，或者仅在特定、非关键的交互中使用。动画时长与频率： 抖动效果不宜过长或过于频繁。3秒是一个相对合理的持续时间。过长的抖动会分散用户注意力，甚至引起烦躁。目标选择： 确定抖动的目标是特定元素、容器还是整个页面。对整个页面进行抖动应特别小心，因为它会影响所有内容的可读性。浏览器兼容性： 现代浏览器对CSS @keyframes和animation的支持非常好，但在非常老的浏览器中可能需要添加浏览器前缀（如-webkit-），不过现在已不常见。
总结
通过本教程，我们学习了如何利用CSS的@keyframes定义复杂的抖动动画，并使用animation属性将其应用到HTML元素。更重要的是，我们掌握了如何结合JavaScript，通过动态添加和移除CSS类的方式，实现按需、可控地触发抖动效果，这使得动画在用户交互中变得更加灵活和实用。在实际开发中，请务必权衡动画的视觉效果与用户体验，确保其能为产品增色而非造成干扰。
以上就是CSS动画实现HTML元素抖动效果教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592881.html
微信扫一扫 
支付宝扫一扫 
