CSS3动画-变换：scaleX（-1）-前进/后退-缩小大小-为什么？

您好，我尝试制作一个小动画，让mario来回移动并改变方向，我尝试使用“transform:scaleX（-1）”，但这不是我想要的效果

我希望马里奥在到达前保持身材，然后不停地改变方向

这是一个预览：

代码：

#base img {
  position : absolute;
  height: 125px;
  bottom: 0px;
  left: 0px;
  animation: roll 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes roll {
    0%   {left:0px;}
    50% {left:875px;transform: scaleX(-1);}
    100% {left:0px;}
}

---

谢谢你的帮助

如果您想保持大小，但前后旋转，我建议使用

变换：rotateY（180度）到<编码>变换：旋转（0度）而不是变换比例特性。此外，您可能需要添加更多动画锚点以使转弯瞬间，而不是在图像移动时缓慢旋转图像

代码笔示例：

还注意到；由于您已将动画从0%-50%-100%来回“重置”，因此实际上不需要“替换”选项作为动画方向。
这是因为您需要更好地处理scaleX在1和-1之间的切换
在这里，根据定义，从0%到50%的所有动画都需要从1切换到-1。您需要定义更好的关键点，如下所示


#基本{
高度：150像素；
宽度：1000px；
背景色：#EFEF；
边框：纯黑2px；
位置：相对位置；
}
#基础img{
位置：绝对位置；
高度：125px；
底部：0px；
左：0px；
动画：运行10秒；
动画迭代次数：无限；
}
@关键帧运行{
0%{left:0px；transform:scaleX（1）；}
50%{left:875px；transform:scaleX（1）；}
51%{transform:scaleX（-1）；}
100%{left:0px；transform:scaleX（-1）；}
}
像这样试试

#base img {
  position : absolute;
  height: 125px;
  bottom: 0px;
  left: 0px;
  animation: run 10s infinite;
}

@keyframes run {
    0%   {left:0px;}
    50% {left:875px; transform: scaleX(1);}
    55% {transform: scaleX(-1);}
    95% {transform: scaleX(-1);}
    100% {left:0px;}
}