Css 两个动画一起工作。。。？

如标题所述，我正在尝试使两个动画同步。。。 我将链接两个单独的动画在2小提琴，这样你可以看到他们每个人，我也将链接到我的奇怪的结果小提琴

第一小提琴

副手

这是我连接它们的代码：（仅限chrome）

#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限交替；
-webkit动画名称：运行、交换；
-webkit动画持续时间：8s；
动画：线性无限交替；
动画名称：运行、交换；
动画持续时间：8秒；
}
@-webkit关键帧运行{
0%{左：0；}
50%{左：82%；}
100%{左：0；}
}
@-webkit关键帧交换{
0% {
-webkit转换：scalex1；
-webkit动画计时功能：步骤（1，结束）；
}
50% {
-webkit转换：scaleX（-1）；
-webkit动画计时功能：步骤（1，结束）；
100%{-webkit转换：scalex1；
-webkit动画计时功能：步骤（1，结束）；
}
}       

所以你可以看到，它第一次镜像它是有效的，但下一次它不。。。 你知道为什么吗？ 土豆的脸应该是这样的

->->->->->->->->->->->->->->->->->->->

---

您只需从

-webkit动画中删除
alternate
：linear infinite alternate；

#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限；
-webkit动画名称：运行、交换；
-webkit动画持续时间：8s；
}

你错过了关键帧的某个地方

看这里：

---

这里是

您只需要从

-webkit动画中删除
alternate
：线性无限alternate

#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限；
-webkit动画名称：运行、交换；
-webkit动画持续时间：8s；
}

你错过了关键帧的某个地方

看这里：

这里是
我认为您需要从运行中删除50%，请尝试以下操作：


#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限；
-webkit动画名称：运行、交换；
-webkit动画持续时间：2秒；
}
@-webkit关键帧运行{
0% {
左：0；
}
50% {
左：82%；
}
100% {
左：0%；
}
}
@-webkit关键帧交换{
0%{-webkit转换：scaleX 1；
-webkit动画计时功能：步骤（1，结束）；}
50%{-webkit转换：scaleX（-1）；
-webkit动画计时功能：步骤（1，结束）；}
100%{-webkit转换：scalex1；
-webkit动画计时功能：步骤（1，结束）；}
}
我认为您需要从运行中删除50%，请尝试以下方法：


#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限；
-webkit动画名称：运行、交换；
-webkit动画持续时间：2秒；
}
@-webkit关键帧运行{
0% {
左：0；
}
50% {
左：82%；
}
100% {
左：0%；
}
}
@-webkit关键帧交换{
0%{-webkit转换：scaleX 1；
-webkit动画计时功能：步骤（1，结束）；}
50%{-webkit转换：scaleX（-1）；
-webkit动画计时功能：步骤（1，结束）；}
100%{-webkit转换：scalex1；
-webkit动画计时功能：步骤（1，结束）；}
}

请您解释一下“同步”是什么意思，也许一个GIF动画会对我们有所帮助？像这样：？是的，完全一样，但它不应该在移动时掉头，它被支持切换scaleX instant@MaverickCan。请解释一下你所说的同步是什么意思，也许一个GIF动画会对我们有所帮助？像这样：？是的，完全一样，但它不应该在移动时掉头，它被支持切换scaleX instant@MaverickThanks很多，非常好的答案，也是另一种解决方法+特别是对于备选答案。我认为把它作为一个动画来实现比用两个动画来实现要好。非常感谢，这是一个非常好的答案，也是解决这个问题的另一种方法+特别是对于备选答案。我认为这是更好地实现一个单一的动画，而不是两个。谢谢你的回答，但这不是它应该移动的方式，我误解了你想要什么，但在你上次编辑后，我明白了。请再试一次。谢谢你的回答，但这不是它应该移动的方式，我误解了你想要的，但在你上次编辑后，我清楚地知道了。再试一次。