CSS animation多个动效叠加的问题

一个简单的动效叠加问题：

@keyframes motion01 {
    0% {
        transform: translate3d(0, -50%, 0) scale(.3) rotate(0deg);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(360deg);
    }
}

@keyframes motion01 {
    0% {
        transform: rotate(0deg) scale(0.3) translate3d(0,-50%,0);
    }
    100% {
        transform: rotate(360deg) scale(1) translate3d(0,0,0);
    }
}
           

请问，

motion01

和

motion02

的区别是什么？

这两个css动效，如果应用在一张图片上，虽然只是平移和旋转的书写次序进行了对调，但效果却截然不同（如果图片宽和高不等的话）。

原因很简单，先旋转的情况下，图片在水平方向上占据的的宽度会发生变化，图片的中心会向右侧移动。