17370845950

新闻动态

CSS动画实现HTML元素抖动效果教程

本教程详细介绍了如何利用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元素抖动效果
  


  我正在抖动！

动态触发抖动效果（“函数式调用”）

在实际应用中，我们通常需要根据用户的交互或其他事件来触发抖动，而不是让它一直抖动。这类似于“调用一个函数”来执行抖动。实现这一目标最常用的方法是结合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元素抖动
  


  点击按钮抖动我

在上述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;
}

// JavaScript
const 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类的方式，实现按需、可控地触发抖动效果，这使得动画在用户交互中变得更加灵活和实用。在实际开发中，请务必权衡动画的视觉效果与用户体验，确保其能为产品增色而非造成干扰。