颤动动画容器

颤动动画容器是一种常见的UI效果，适用于增强用户交互体验。该容器通过震动动画的形式，使用户关注并吸引其注意力。

实现方式

CSS

应用CSS动画技术，通过关键帧（@keyframes）定义动画的各个阶段，模拟容器的最终效果。

.shake {
  animation-name: shake;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

JavaScript

使用JavaScript创建一个setInterval()方法，定期更改元素的位置，产生震动效果。

function shake(container, interval = 10, distance = 10, times = 5) {
  let timer = null;
  let count = 0;
  const originPos = container.style.position;
  container.style.position = 'relative';
  const shakeInterval = setInterval(() => {
    container.style.left = `${distance * Math.pow(-1, count)}px`;
    count++;
    if (count >= times) {
      clearInterval(shakeInterval);
      container.style.position = originPos;
      container.style.left = '';
    }
  }, interval);
}

适用场景

颤动动画容器适用于以下场景：

• 提示错误或警告信息
• 提醒用户执行某项操作
• 强调关键信息

参考资料

• CSS Shaking Animation
• [How to Create A Shake Effect with JavaScript](https://www.tutorialspoint.com/how-to-create-a-shake-effect-with-javascript