CSS 左右晃动效果常常用在网页设计中，可以制造出比较生动的效果，让页面更加活泼和有趣。那么，我们该如何实现这种效果呢？

/*先定义一个class*/
.shake {
animation: shake 0.2s;
}
/*定义动画关键帧*/
@keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(10px); }
100% { transform: translateX(0); }
}

在以上代码中，我们定义了一个名为 shake 的 class，然后在 CSS 样式中使用了 animation 和 keyframes 属性来定义动画效果。这里的效果是让元素水平方向上从当前位置向右晃动一段距离后再返回原来的位置。

使用这种方式可以实现一些比较生动的效果，比如让按钮在用户鼠标移动到上面时晃动一下，增加页面的趣味性。

Instagram 等很多网站都有使用过类似的效果，可以说这种效果已经成为了设计中的一个常见技巧。在使用时需要注意的是，适当控制晃动的范围和速度，过度使用会显得过于花哨，反而会影响用户体验。