How do i move the whole bullet using animation

Question

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

Answer 1

Code master Joaquin Nievas
You forgot or missed to put curly braces {} after 0% and 100%. That's why it won't move.
Do it like this:

@keyframes bullet {
0% {transform: translate(0px , 0px)}
100% {transform:translate(300px , 0px)}
}

But this will automatically animate. If you want to animate it after clicking, use JavaScript.

PS: Mark this as best answer if you think this helps you.

Answer 2

transform: translate (90px , 0px)

Answer 3

if you want to move them to the end of the page you could use:

@keyframes

0% transform : translate (0px , 0px)
100%transform:translate(100% , 0%)

Answer 4

i want to move it from the start position to 300px to the right

Answer 5

if i click on the bullet it should move 300px to the bullet and the bullet is made of two parts

Answer 6

Code master Your animations still don't work because the word "transform:" is outside the curly braces. You should put it inside this "{".

Answer 7

i dont want to rotate the bullet i want to move it horizontally

Answer 8

hey joaquin im sorry the question is wrong i want to transition it

Answer 9

you can do it with JavaScript . the function is called onclick event . search onclick event in a web page called w3schools

Answer 10

transition it?

Answer 11

where do you want to move it?

Answer 12

@keyframes bullet

0% transform: translate(0px , 0px)
100%transform:translate(300px , 0px)

Answer 13

can I somehow merge my bullet1 and bullet2 div