Little help with my code please!

Question

I have created one object called 'smiley' and a shadow for it. I have tryed to animate those objects with JS jQuery but it not work properlly. My intention was to make 'smiley' bounce from the surface (shadow) and the shadow to stay on the same place and only to transform in width. But when I run the code both objects are moving down (the shadow should be fixed) and up(like bounce) and the shadow doesn't get wider.
Please help me to solve this issue and tell me where is my mistake, because the animation of the objects with jQuery is realy cool thing but gets very annoying when you don't know how to do that.
Thank You

Answer 1

Use the svg animate and animateMotion tags, not JS, JQuery or CSS
https://code.sololearn.com/WmYCeg0K4G2c/?ref=app

Answer 2

in the CSS don't use position absolute 😐

Answer 3

you make the shadow and the simely in one svg

Answer 4

Use CSS animation only

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

Answer 5

I have changed the position but it still not work properlly( the shadow is moving).

Answer 6

Perfect solution Calvin. Your animation is perfect. Well done