CSS:转换gif上的属性

Question

我正试图让我的gif向右移动，然后返回到原始位置。我已经设置了关键帧和所有内容，但我的图像仍然没有移动。如有任何帮助，我们将不胜感激。这是我的代码：

.mushroom {
width: 300px;
height: 300px;
animation-name: move-right;
animation-duration: 5s;
transform: scaleX(-1);
}
@keyframes move-right {
0% {
transform: translate (0, 0);
}
25% {
transform: translate (50px, 0);
}
50% {
transform: translate (100px, 0);
}
75% {
transform: translate (150px, 0);
}
100% {
transform: translate (200px, 0);
}
}

<div class="row">
<div class="mushroom2">
<img src="css/images/mush.gif" alt="orange mushroom" class="mushroom">
</div>
</div>

Answer 1

请尝试更改left属性。

.mushroom {
width: 300px;
height: 300px;
animation: moveright 5s infinite;
transform: scaleX(-1);
left: 0;
position: relative;
}
@keyframes moveright {
0% {
left: 0;
}
100% {
left: 200px;
}
}

<div class="row">
<div class="mushroom2">
<img src="css/images/mush.gif" alt="orange mushroom" class="mushroom">
</div>
</div>

Answer 2

我认为解决方案很简单，只需在CSS动画中的每个变换处从translate和打开的(之间删除空白即可：

@keyframes move-right {
0% {
/* transform: translate (0px, 0px); - white space between translate and ( causes syntax error in your CSS */
transform: translate(0px, 0px);
}
25% {
transform: translate(50px, 0px);
}
50% {
transform: translate(100px, 0px);
}
75% {
transform: translate(150px, 0px);
}
100% {
transform: translate(200px, 0px);
}
}

空白基本上会导致语法错误，从而导致CSS和动画的解析失败。这就是为什么你看不到任何动作/动画。

希望能有所帮助！