CSS动画随着旋转前后移动

我正在尝试只使用CSS制作一个非常简单的动画动作。 我想做的是

对象在200px和800px之间来回移动，当对象到达边缘时，它将旋转其方向

.cow {
    width: 300px;
    position: absolute;
    top: 50px;
    left: 0px;
    animation: cowmove 5s linear both infinite alternate,
                rotate 0.3s linear 5s; 

}

@keyframes cowmove{
    from{transform: translateX(200px);}
    to{transform: translateX(800px);}
}

@keyframes rotate{
    from{transform: rotateY(0);}
    to{transform: rotateY(180deg);}
}

这是我到目前为止编写的代码，但是旋转对我来说很难

使用当前代码，对象将从200px移动到800px，传送到200px点并旋转，传送回800px点并移回200px

这可能是一个非常简单的解决方案，但我很头痛，弄明白了这一点：(

---

谢谢，

只制作一个动画，因为您处理的是相同的属性：

.cow{
宽度：80px；
高度：80px；
背景：线性梯度（蓝色50%，红色0）；
边界半径：50%；
位置：绝对位置；
顶部：50px；
左：0px；
动画：cowmove 5s线性无限；
}
@关键帧移动{
0% {
变换：translateX（100px）旋转（0）；
}
30% {
变换：translateX（400px）旋转（0）；
}
50% {
变换：translateX（400px）旋转（180度）；
}
80% {
变换：translateX（100px）旋转（180度）；
}
100% {
变换：translateX（100px）旋转（360度）；
}
}

---

只制作一个动画，因为您处理的是相同的属性：

.cow{
宽度：80px；
高度：80px；
背景：线性梯度（蓝色50%，红色0）；
边界半径：50%；
位置：绝对位置；
顶部：50px；
左：0px；
动画：cowmove 5s线性无限；
}
@关键帧移动{
0% {
变换：translateX（100px）旋转（0）；
}
30% {
变换：translateX（400px）旋转（0）；
}
50% {
变换：translateX（400px）旋转（180度）；
}
80% {
变换：translateX（100px）旋转（180度）；
}
100% {
变换：translateX（100px）旋转（360度）；
}
}

---

不必创建两个

@关键帧

，您可以像这样在一个关键帧中执行两个变换：

.翻译{
高度：100px；
宽度：100px；
背景#151f28；
过渡：0.5s；
动画：无限；
} 
@关键帧移动{
0% {
变换：translateX（100px）旋转（0度）；
}
49% {
变换：translateX（500px）旋转（0度）；
}
50% {
变换：translateX（500px）旋转（360度）；
}
100% {
变换：translateX（100px）旋转（360度）；
}
}

不必创建两个

@关键帧，您可以像这样在一个关键帧中执行两个变换：



.翻译{
高度：100px；
宽度：100px；
背景#151f28；
过渡：0.5s；
动画：无限；
} 
@关键帧移动{
0% {
变换：translateX（100px）旋转（0度）；
}
49% {
变换：translateX（500px）旋转（0度）；
}
50% {
变换：translateX（500px）旋转（360度）；
}
100% {
变换：translateX（100px）旋转（360度）；
}
}
哦，来吧..你不能再等36秒吗？：）哦，来吧。。你不能再等36秒吗？：）