0

Why isn't it moving?

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!

17th Jul 2023, 7:29 PM
Brushymilbil
Brushymilbil - avatar
4 Answers
+ 5
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; } }
18th Jul 2023, 4:11 AM
Tibor Santa
Tibor Santa - avatar
+ 4
It would be much better if you could attach your code as per this instruction: https://code.sololearn.com/Wek0V1MyIR2r/?ref=app
17th Jul 2023, 8:55 PM
Ausgrindtube
Ausgrindtube - avatar
+ 4
One oversight. Set the position property to relative #hit{     height:30px;     width:30px;     position:relative;     background-color:yellow;     animation:movement 5s infinite; }
19th Jul 2023, 1:44 AM
Chris Coder
Chris Coder - avatar
17th Jul 2023, 10:05 PM
Brushymilbil
Brushymilbil - avatar