CSS @keyframe, translateX() 和 rotateY() 在两端

Question

我正在尝试仅使用 CSS 来制作某种马里奥卡丁车动画，基本上我有一辆汽车从屏幕左侧开始，一直穿过屏幕。

这里是问题发生的地方：
我希望汽车基本上改变方向（所以从右向左返回）。

这只需 alternate 的 animation-direction 即可完成。如果你想象这个，你会看到汽车在从左到右的路上倒退。

我想做的是在每条路径的尽头镜像它，让汽车转向相反的方向，应该占用 0.1s 和可以使用 rotateY(180deg).

我尝试组合几个关键帧动画（一个用于 translate，一个用于 rotate），但这行不通，因为我的 'car' 只会旋转和小故障，根本不会移动。我认为可能是这两种转换方法的顺序有问题，但反过来还是不行。

之后，我尝试将两种transform方法结合起来并交替播放动画，看起来有点像这样：

div {
    animation: dirChange 5s linear infinite both alternate;
}

@keyframes dirChange {
    0% {
        transform: translateX(20vw) rotateY(0);
    }
    50% {
        transform: translateX(80vw) rotateY(0);
    }
    90% {
        transform: translateX(80vw) rotateY(.5turn);
    }
    100%{
        transform:translateX(80vw) rotateY(.5turn);
    }
}

如您所见，我先尝试 translate 将汽车开到 80vw 的末端，然后再尝试应用 rotateY。这在从左到右的第一种方式上看起来还不错（尽管汽车旋转有点早，可以很容易地使用其他百分比修复），但在备用返回方式上，汽车当然旋转得非常早并且基本上驱动剩下的路倒退。

那么我怎样才能让我的车在每条路的尽头旋转，然后在另一条路保持这种旋转，然后在起点再次旋转？
这甚至可能仅使用 CSS 还是我需要 JS？

Answer 1

使用 to 和 from 代替百分比。

Answer 2

我终于知道怎么做了。这是我的解决方案，可以在我的 codepen https://codepen.io/xutocode/pen/poNGXam .

上看到

@keyframes changeDir{
0% {transform: translateX(0vw) rotateY(0);}
49% {transform: translateX(89vw) rotateY(0);}
50% {transform: translateX(90vw) rotateY(.5turn);}
99% {transform: translateX(1vw) rotateY(.5turn);}
100% {transform: translateX(0vw) rotateY(0);}
}

诀窍基本上是将所有内容都放在一个关键帧中，然后进行完整的循环（不仅是从左到右的方式，还有返回的方式）。基本上我只是给了他们从 49% 到 50% 和 99% 到 100% 的 1% 沿 y 轴旋转，从而产生了镜像汽车。

CSS @keyframe, translateX() 和 rotateY() 在两端

CSS @keyframe, translateX() and rotateY() on both ends

css

keyframe

css-animations