Weird animation behaviour

Project link i made this small css animation. The sun randomly sometimes rises and sets in front of grass and sometimes it works properly by rising and setting behind the grass. Can someone please explain this behavior?


Can’t help because view source won’t show me your source. It just shows a markdown file about glitch. I saw the sun always in front of the grass. In SVG the order matters so the sky would be coded first, then the sun then the grass. Can you use z-index? Also the sun enters properly but increases the width of the scene when it exits.

Much Later: OK I remembered I can use “inspect” the problem is that to use z-index You must first use position. So, right now, z-index has no effect. I added to #grass position:absolute; bottom:0; And it looks correct.

1 Like

Thank you for your help.