Css 当我使用different@keyframes时，只有第一个在工作，而另一个在'；T

当我使用Different@keyframes时，只有第一个在工作，而另一个不工作 当我将@keyframes从左向右移动放在第一位，并与.text一起使用时，它起作用了，因为它是第一个@keyframes，但与.img类一起使用的第二个@keyframes从右向左移动时，它不起作用，并且它没有与第一个相同的着色代码

 .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
    }
}

---

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

你没有关闭你的括号

transform:translateX（100

应该是

transform:translateX（100）

有些值在px中，有些值没有px

transform:translateX（200px）；

很好，

transform:translateX（100

不好（没有闭合括号，没有px）

在代码部分

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

---

这个

s

在那里做什么？

你的css代码好像坏了。0%{transform:translateX（-500px）；s