Day # 72: Falling Stars

Animations are very helpful for websites in regards to adding sophistication. There are several animation libraries that you can use, but they could add a significant amount of size that could end up being very expensive in terms of SEO.

With that in mind, I decided to create a native animation, i.e. only using CSS, that consists of falling stars. The key here was to make 5 div’s in order to modify their background, and then setting their “before” and “after” pseudo classes to change one of their ends, which are the stars themselves.

Then, I made three animations: one that changes the width of every div, another to make those div’s “fall” and finally one that makes those div’s “shine”.

One needs to pay special attention to the delays of the animations of each div to coordinate accurately the order in which each one of those stars “fall” from the sky.