Html 如何使此CSS动画平滑？

我希望它在每次旋转之间进行插值，而不是以锯齿状的方式摇摇欲坠

div{
边框：1px纯红；
宽度：600px；
高度：300px；
动画：抖动0.75秒；
动画迭代次数：无限；
}
@关键帧抖动{
0%{变换：旋转（0度）；}
25%{变换：旋转（-4deg）；}
50%{变换：旋转（0度）；}
75%{变换：旋转（4deg）；}
100%{变换：旋转（0度）；}
}

---

您必须添加transition属性和CSS，然后它将如下所示

div {
  border: 1px solid red;
  width: 600px;
  height: 300px;
  transition: 1s ease-in-out all;
  animation: shake 0.75s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
 25% { transform: rotate(-4deg); }
 50% { transform: rotate(0deg); }
 75% { transform: rotate(4deg); }
100% { transform: rotate(0deg); }
}

---

如果您发现很难看到更改，请减少动画时间并增加过渡时间，这对我来说似乎没有任何作用。如果我希望过渡时间函数在这里平滑，我不希望它是线性的吗？