Why isn't it moving?

Question

So i want the element to move back and forth.
@Keyframes movement
{
0%{
right:0;
}
10% {
right:10;
}
20%{
right:20;
}
30% {
right:30;
}
40% {
right:40;
}
50% {
right:50;
}
60%{
ridge :40;
}
70% {
right:30;
}
80%{
right:20;
}
90% {
right:10;
}
100% {
right:0;
}
}
The animation is called, but it doesn't move.
Maybe for more info i'll also add that flex-direction column and align -items : center is on. But when i remove those it also doesn't work so idk.
Thanks in advance!

Answer 1

Manipulating the left and right attribute is meaningless when your elements are centered.
Maybe you can play with the margin. If you change your CSS for this, you will see some movement. You may have to fine-tune it and you can also try percentage instead of pixels.

@keyframes movement
{
0% { margin-right: 0; }
25% { margin-right: 200px; }
50% { margin-right: 0; }
75% { margin-left: 200px; }
100% { margin-left: 0; }
}

Answer 2

It would be much better if you could attach your code as per this instruction:

https://code.sololearn.com/Wek0V1MyIR2r/?ref=app

Answer 3

One oversight.

Set the position property to relative

#hit{

    height:30px;

    width:30px;

    position:relative;

    background-color:yellow;

    animation:movement 5s infinite;

}

Answer 4

Well then,Ausgrindtube , here is the project:
https://code.sololearn.com/W7snUSFt24SH/?ref=app