[分享]css3摇晃效果会抖动吗

CSS3是前端开发中常用的技术，它提供了许多动态效果。其中，摇晃效果是一种常用的效果，可以让页面元素呈现出一种有趣的动态效果。但是，有些开发者使用CSS3实现摇晃效果时会发现它会抖动，那到底这种现象是...

CSS3是前端开发中常用的技术，它提供了许多动态效果。其中，摇晃效果是一种常用的效果，可以让页面元素呈现出一种有趣的动态效果。但是，有些开发者使用CSS3实现摇晃效果时会发现它会抖动，那到底这种现象是为什么呢？

// CSS代码实现摇晃动画效果
@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(-10px, 0px) rotate(-10deg); }
  20% { transform: translate(10px, 0px) rotate(10deg); }
  30% { transform: translate(-10px, 0px) rotate(-10deg); }
  40% { transform: translate(10px, 0px) rotate(10deg); }
  50% { transform: translate(-10px, 0px) rotate(-10deg); }
  60% { transform: translate(10px, 0px) rotate(10deg); }
  70% { transform: translate(-10px, 0px) rotate(-10deg); }
  80% { transform: translate(10px, 0px) rotate(10deg); }
  90% { transform: translate(-10px, 0px) rotate(-10deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.shake {
  animation: shake 0.5s;
} 

如上代码所示，我们使用CSS3的关键帧动画实现了摇晃效果，在元素上添加了动画类名.shake。但是，当我们将这个样式应用到元素上时，我们会发现它并不是完美的，元素会抖动。这是因为CSS中的转换函数：translate与rotate导致的，这两个函数的组合可能会让元素的位置和大小发生微小的变化，从而导致抖动。

那该如何避免这种情况呢？首先，我们可以尝试将摇晃效果的动画分解成移动的两个转换函数：translate与rotate。例如，将CSS代码修改为：

/* CSS修改后的摇晃动画效果 */
@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-10deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  70% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
  90% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.shake {
  animation: shake 0.5s;
} 

在上述代码中，我们去掉了translate函数，只保留了rotate函数。此时，我们再将该效果应用到页面元素上，就不会出现抖动的问题了。

总之，当我们使用CSS3实现摇晃效果时，一定要留意元素的位置和大小的微小变化导致的抖动，可以适当地调整CSS代码以克服这个问题。