在CSS动画中，旋转和平移是如何结合的？

我在codepen上看到了这个动画，我不知道为什么它是这样写的，以产生这种效果，但我认为它会产生顺时针旋转360度，逆时针旋转360度的效果，而不是上下或左右反弹

我对这些关键帧动画特别困惑

@keyframes move{
    from {
       transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
    }
    to {
       transform: rotate(-360deg) translateX(1.125em) rotate(360deg);
    }
}

结果如下

从中，我们可以看到broswer应该如何处理

变换

值之间的插值。在这种情况下，我们使用：

如果from和to变换具有相同数量的变换函数， 每个变换函数对要么具有相同的名称，要么是一个 相同基元的导数：插值每个变换函数 按变换函数插值中所述配对。这个 计算值是生成的变换函数列表

因此，浏览器将第一个

rotate

从

360deg

更改为

-360deg

，最后一个

rotate

更改为相同，而

translateX

将保持不变。然后，我们将执行以下步骤：

transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
transform: rotate(350deg) translateX(1.125em) rotate(-350deg);
transform: rotate(340deg) translateX(1.125em) rotate(-340deg);
....
transform: rotate(0) translateX(1.125em) rotate(0);
....
....
transform: rotate(-360deg) translateX(1.125em) rotate(360deg);

现在我们需要了解

rotate（-adeg）translateX（b）rotate（adeg）

是如何工作的。首先，您可能会注意到旋转不会对元素产生任何视觉效果，因为我们处理的是一个圆，它只会影响平移的工作方式，更准确地说，第一次旋转很重要（左边的旋转）

.container{
宽度：50px；
高度：50px；
利润率：50像素；
边框：2倍实心；
}
.盒子{
宽度：50px；
高度：50px；
背景：红色；
边界半径：50%；
动画：移动2s线性无限；
}
阿尔特先生{
动画：移动alt 2s线性无限；
}
@关键帧移动{
从{
变换：旋转（360度）translateX（1.125em）旋转（-360度）；
}
到{
变换：旋转（-360度）translateX（1.125em）旋转（360度）；
}
}
@关键帧移动alt{
从{
变换：旋转（360度）translateX（1.125em）；
}
到{
变换：旋转（-360度）translateX（1.125em）；
}
}

您预期的效果是什么？请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难说清楚你在问什么。欢迎来到SO。请看一看。我做的，给那个些对修补感兴趣的人。