Ran into a lot of issues today as I attempted CSS animations. I haven't had too much practice with this CSS concept and today that lack of knowledge showed. I briefly touched upon it during my reviews and tutorials but never actually used it for a project. This CSS property has always been intimidating from the beginning, I figured today I challenged it head on. Even though this section of the project took up all day I can say I am almost done with this project to my satisfactory.
I started my day with trying to find the perfect PNG for my background overlay image for the sky. I wanted a cartoon like night sky so I was pretty hung up on trying to find the perfect image. To my disappointment I couldn't find a PNG matching my standards so I went for a more realistic night sky look. This change in direction pretty much made me drop my idea of twinkling stars with a shooting star going across the screen to a meteor shower. I thought this would with fit my new theme a bit better since I am now transitioning from a cartoon looking planet to a more realistic sky.
I had a few issues with having the animations act the way I wanted and in the direction I needed it to be in. I also had issues where the animation would go across the entire screen ignoring any Z-index properties. I tried maintaining the animation in it's own container but things was just not working the way I wanted them to today. After reading documentation, googling, reading multiple StackOverFlow threads. I was able to piece together my mistakes. I did not come across a valuable solution in regards to my Z-index issue, so on my own I decided to use google dev tools which helped me realize if I set the CSS property overflow to hidden on the parent container I would be able to retain my animation in it's given container. I love/hate moments like this because it killed 2+hrs of my time but now I have new knowledge and through my research was able to iron out my bugs. I have to be honest and say I still feel a bit shaky on this topic and will be revisiting this topic with a smaller project soon!
Here's a link to my Google Drive where I uploaded a video of my project to demonstrate what I have done so far: drive.google.com/file/d/148y3zf_iTWzMCLakV3..
All in all the hard parts are done I just have to add a few more objects to the mix and work on finessing the project in general. I am also looking into how I can have my meteor shower display one meteor at a time but have another pick up right when it's done. I know to do this I have to play with the duration and delay properties and I will try to get this done tomorrow as well.
Here is a still image of what my project looks so far. The animations will not be displayed and you will have to use the link I mentioned above to see the animation in effect. I did however take an screenshot while my animations were playing:
Stay Tuned...!