当我习惯不同的@keyframes只有第一个在工作，而另一个不在

Question

当我过去区分@keyframe时，只有第一个在工作，而另一个不工作当我先把@keyframe从左向右移动，并将其与.text一起使用时，它起作用了，因为它是第一个，但我与.img类一起使用的从右向左的第二个@keyframe不起作用，它与第一个没有相同的着色代码

.img2 {
float: right;
width: 300px;
height: 300px;
border-radius: 10px 10px 0px 0px;
margin: 20px;
animation-name: right-to-left;
animation-duration: 1s;
animation-timing-function: ease;
}


.text {
margin: 20px;
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
animation-name: moving-from-left-to-right;
animation-duration: 1s;
}
@keyframes moving-from-left-to-right {
0% {
transform: translateX(-500px);
s
}
25% {
transform: translateX(-400
}
50% {
transform: translateX(-200px
}
75% {
transform: translateX(-100px
}
100% {
transform: translateX(0px
}
}
@keyframes right-to-left {
0% {
transform: translateX(200px);
}
25% {
transform: translateX(100
}
50% {
transform: translateX(50px
}
100% {
transform: translateX(0px
}
}

Answer 1

它不能按预期工作的原因有很多：

1. 您没有关闭括号

   transform: translateX(100应为transform: translateX(100)

2. 你有一些以px为单位的值，也有一些没有px的值。

   CCD_ 3是好的，transform: translateX(100坏(没有闭括号，没有像素(

3. 在代码的部分

   @keyframes moving-from-left-to-right {
   0% {
   transform: translateX(-500px);
   s
   }
   

这个s在那里做什么？