Html 旋转图像不平滑动画

我试图创建这个动画，使图像从左向右倾斜，反之亦然，但正如您在中看到的，由于某些原因，它并不平滑。它倾斜得很奇怪

@关键帧cat{
0%{
变换：旋转（0度）；
}
33%{
变换：旋转（-5度）；
}
66%{
变换：旋转（0度）；
}
100%{
变换：旋转（5度）；
}
}
img{
保证金：32px 0px 0px 32px；
动画：猫1无限；
}

---

您需要先启动-5度，然后转到5度，然后再次返回-5度：

@关键帧cat{
0%{
变换：旋转（-5度）；
}
50%{
变换：旋转（5度）；
}
100%{
变换：旋转（-5度）；
}
}
img{
保证金：32px 0px 0px 32px；
动画：cat 0.5s无限；
}

---

好吧，如果你想摇晃图片，你可以使用

或者，如果您希望平滑过渡，请使用

动画时间函数只定义元素随时间移动的方式
某些默认时间常数为线性、缓进、缓出、缓进、缓出，
但您可以在中创建自定义时间函数。

---

希望这有帮助。

哦，这很有道理。谢谢@VGO独家版，如果它解决了您的问题，请接受答案。是的，必须等待stackoverflow允许我。

@keyframes cat {
  0%{
    transform:rotate(0deg);
  }

  10%{
        transform:rotate(-5deg);
  }
   20%{
        transform:rotate(5deg);
  }
   30%{
        transform:rotate(-5deg);
  }
   40%{
        transform:rotate(5deg);
  }
   50%{
        transform:rotate(-5deg);
  }

  60%{
        transform:rotate(5deg);
  }
   70%{
        transform:rotate(-5deg);
  }
   80%{
        transform:rotate(5deg);
  }
   90%{
        transform:rotate(-5deg);
  }
  100%{
        transform:rotate(5deg);
  }
}

img{
  margin:32px 0px 0px 32px;
    animation:cat 1s infinite;
}

@keyframes cat {
  0%{
    transform:rotate(-10deg);
  }

  50%{
        transform:rotate(10deg);
  }
  100%{
        transform:rotate(-10deg);
  }
}

img{
  margin:32px 0px 0px 32px;
    animation:cat 1s infinite;
  animation-timing-function: .19,.83,.91,.31;
}