I've got stuck with @keyframes in animation. Please help me out!

Question

I've created a simple animation to move an object from one position to another and I created the keyframes like
@keyframes drive{
from{ transform:translateX(0px);}
to {transform:translateX(300px);}
}
but when I run this, the object , after defined delay, appears at the final position without showing the movement.
Please find it here. Thank you!
https://code.sololearn.com/Wyw2sWO1zzCx/?ref=app

Answer 1

It seems you've forgot to define the animation-duration for the mario class. Just provide any value like 3s and you're good to go! 😉

Answer 2

Hi Shashi Ranjan!
In CSS, animation property requires a duration attribute which sets the time-interval of the same. As the default value of animation-duration is 0s, therefore your animation just flashed-off.

To make it flow, you require:
animation-duration: 5s; // inside the .mario block
Hope it does the part!

Answer 3

You're welcome! Every hardwork you've done will push you to the next level, so believe in yourself! 👍

Answer 4

@Shashi Ranjan Yup it's really cool when I first saw the Mario character in you code, the parallax effect is great!

Now you've to think how to repeat the animation so it appears to be travelling forever. 😉

Answer 5

Well all you need is adding the following property to the mario class:-

animation-iteration-count: infinite;

and try to understand why it works. Of course, the more practices you got, the better you become. Can't wait to see your next masterpiece! 😉

Answer 6

@Shashi Ranjan You're welcome! 😉

Answer 7

Yea, I tried but you know, by doing so, some other parameters get disturbed so I restored it to previous version. Btw, I'll work upon that. thank you for the help. 😄
And Masterpiece...?? Hahaha😂 That's too much for me, at least for now😉😂

Answer 8

oh...yes! How can I...? Lol😂
Thank you soo much Zephyr for your input.
I thought that animation-delay is enough.
It's my first animation and I was worried about it since last night. Thanks again buddy!😀

Answer 9

Thanks to you too Blue!😀
Now it worked! I'm glad.

Answer 10

Zephyr...did you see my animation now? See it once, I've created it quite nice...Lol😉

Answer 11

@Zephyr Koo yep thinks!
And what repeat? You mean should I set it to infinite? I tried but in @keyframes drive{} it's not working with X from -200px or something. By default it's starting every time with X from 0px. I don't know why it's happening. I guess, due to device?