Simple app all done with only CSS. This was my first attempt at using @keyfames. I saw a demo of something similar and though it was a fun idea. The animation loads as the page loads. I wanted to improve my CSS as it seems like most of those I know avoid it like the plague. I found this to be fun and simple and something I could work on and get done quickly. There are no pictures used here, all the shapes are manipulated by CSS. The images below show snapshots of the sun and its animation as well as the sky and the ground changing color and the moon disappearing and reappearing.
First part of the project before the sunrise.
![alt text][logo] [logo]: https://github.com/deesmateen/sunrise/blob/master/assets/night-screen-shot.png?raw=true
Half way through the project, just after 50%.
![alt text][day] [day]: https://github.com/deesmateen/sunrise/blob/master/assets/day-screen-shot.png?raw=true
The last part of the animation, just before the sunsets and the moon comes back into the picture.
![alt text][end] [end]: https://github.com/deesmateen/sunrise/blob/master/assets/sunset-screen-shot.png?raw=true