CSS关键帧动画中的平滑旋转

如何使CSS 3关键帧动画看起来更平滑？

按原样，旋转似乎在180度停止。我希望它能在不停在中间的情况下完成360度旋转。理想情况下，我希望它加速和减速

。图标{
显示：内联块；
动画：如2s 3s无限；
字体大小：40px；
}
@关键帧如{
0% {
变换：旋转（0度）比例（1）；
}
10% {
变换：旋转（15度）比例（1）；
}
50% {
变换：旋转（-180度）比例（1.4）；
}
100% {
变换：旋转（-360度）比例（1）；
}
};

&心；
使用
线性
并通过添加更多百分比来模拟迭代之间的延迟，使最后一个状态花费更多时间：


。图标{
显示：内联块；
动画：像2s 3s无限线性；
字体大小：40px；
}
@关键帧如{
0% {
变换：旋转（0度）比例（1）；
}
10% {
变换：旋转（15度）比例（1）；
}
50% {
变换：旋转（-180度）比例（1.4）；
}
80%,100% {
变换：旋转（-360度）比例（1）；
}
};

&心；
您可以在每个关键帧上设置单独的计时功能

将关键帧设置为180度，使其开始平滑，但以一定的速度结束

将下一个关键帧设置为相反方向，将不停止地通过180，但动画速度仍会增加或减少

正如Teman Afif所回答的，要在动画之间获得暂停，需要将关键帧属性应用于2个不同的百分比


。图标{
显示：内联块；
动画：像6s无限线性；
字体大小：40px；
}
@关键帧如{
0% {
动画计时功能：轻松自如；
变换：旋转（0度）比例（1）；
}
25% {
动画计时功能：放松；
变换：旋转（-180度）比例（1.4）；
}
50%, 100% {
变换：旋转（-360度）比例（1）；
}
};

&心；