css动画左右摇摆循环

CSS动画是一种令人惊叹的工具，它可以帮助我们创造出非常炫酷的效果。其中一种常见的动画就是左右摇摆循环动画。

左右摇摆循环动画可以通过使用CSS中的@keyframes规则以及transform属性来创建。下面是一个示例代码：

    .box {
          animation: sway 2s ease-in-out infinite;
    }
    @keyframes sway {
      0% {
            transform: rotateZ(0deg);
      }
      50% {
            transform: rotateZ(15deg);
      }
      100% {
            transform: rotateZ(0deg);
      }
    }
    

上面的代码中，我们首先给一个class名为“box”的元素添加了一个动画效果。这个动画的名称是“sway”，持续时间是2秒，缓动函数是“ease-in-out”，并且设置了无限循环。

接下来，我们使用@keyframes规则定义了一个名为“sway”的动画。这个动画从0%到50%的时间里，元素会向右旋转15度，从50%到100%的时间里，元素会回到原来的状态，也就是0度。

最后，我们将这个动画应用到我们的“box”元素上，就可以看到一个左右摇摆循环的效果。

总之，左右摇摆循环动画可以帮助我们创造出非常有趣的效果。在实际应用中，我们可以根据具体需求进行调整，从而展现出更加炫酷的动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！