CSS3动画-变换: scaleX(-1) - go/back - size down - why?

Question

你好，我尝试制作一个小动画，其中马里奥来回移动并改变方向，我尝试使用“transform: scaleX(-1)”，但这并不像我想要的那样工作。

我希望马里奥保持他的体型直到到达然后改变方向，不停下来

这是预览: https://codepen.io/Dassef/pen/xJedRE

代码:

#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;}
}

感谢您的帮助!

Answer 1

这是因为你需要更好地处理scaleX在1和-1之间的切换在这里，按照定义，它将需要所有动画从 0% 到 50% 才能从 1 切换到 -1。您需要定义更好的关键点，如下所示

#base {
  height: 150px;
  width: 1000px;
  background-color : #efefef;
  border: solid black 2px;
  position: relative;
}

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

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

<div id = "base"><img src="https://i.imgur.com/QGo5isT.gif"></div>

请注意，备用方向也已删除