Problem with Keyframe within @media on wordpress

Question

Good morning

I’m finding the following difficulty in editing a mobile code in wordpress css, I made an animation with the keyframe on the desktop with the code below, but it’s time to put this same animation adapted for mobile. The problem is that when I put this block of code inside @media wordpress accuses error, already tried to remove it from @media and change the name of the class but without success. Thank you in advance. follows the images with the error shown

 #unidade-movel {
    position: absolute;
    left: 100%;
    top: 97px;
    animation: unidade-movel 10s infinite ;
}

@keyframes unidade-movel {
0% {
    top: 20px;
    left: 0%;
}

10% {
    top: 20px;
    left: 10%;
}
20% {
    top: 20px;
    left: 20%;
}
30% {
    top: 20px;
    left: 30%;
}
40% {
    top: 20px;
    left: 40%;
}
45% {
    top: 130px;
    left: 45%;
}
50% {
    top: 150px;
    left: 40%;
}
60% {
    top: 150px;
    left: 25%;
}
70% {
    top: 180px;
    left: 20%;
}
80% {
    top: 205px;
    left: 20%;
}
90% {
    top: 280px;
    left: 20%;
}
100% {
    top: 280px;
    left: 100%;
}
}