[分享]css关键帧动画左右摇摆

CSS关键帧动画是一种非常常见的动画效果，通过关键帧的设定可以实现多种动画效果。其中一种比较有趣的效果是左右摇摆。/ 关键帧动画 / keyframes sway { 0 { transform: r...

CSS关键帧动画是一种非常常见的动画效果，通过关键帧的设定可以实现多种动画效果。其中一种比较有趣的效果是左右摇摆。

/* 关键帧动画 */
@keyframes sway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}

/* 应用到目标元素 */
.target {
  animation: sway 0.5s ease-in-out infinite;
} 

在上述代码中，我们定义了一个名为"sway"的关键帧动画。该动画从0%到50%将元素向右旋转15度，从50%到100%再将元素向左旋转15度，形成了一种左右摇摆的效果。

接着我们将该动画应用到目标元素中，并设置为每0.5秒执行一次，无限循环。

如果要调整摇摆的幅度，可以通过修改rotate函数中的度数来实现。

/* 调整幅度为10度 */
@keyframes sway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
} 

除了左右摇摆，关键帧动画还可以实现其他有趣的效果，比如缩放、跳跃等，可以根据需求进行调整。