Question

您好，我尝试在马里奥来回移动并改变方向的过程中制作一个小动画，我尝试使用“ transform：scaleX（-1）”，但这不符合我的要求。

我希望马里奥一直保持他的身材，直到到达然后改变方向，而不停下脚步

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

代码：

bindViewHolder

感谢帮助！

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>

请注意，替代方向也已删除

Answer 2

如果要保持大小但要来回旋转，我建议使用transform: rotateY(180deg);到transform: rotateY(0deg);而不是变换scale属性。另外，您可能需要添加更多的动画锚点来使转弯瞬间，而不是在移动图像时缓慢旋转图像。

示例代码笔：https://codepen.io/svdn/pen/qywmzp

也请注意；由于您已经从0％-50％-100％前后“重置”了动画，因此您实际上并不需要'alternate'选项作为动画方向。

Answer 3

尝试这样

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

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

3 个答案: