Leaving the Earth

Julia Shlykova - Apr 27 - - Dev Community

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

The idea of this CSS art has come from the deteriorating environment condition. Global warming isn't imaginary threat for our planet but already the reality. So, in this animation our beautiful Earth switches places with fire Earth which comes from future. Our Earth at the same time dive into oblivion. The spaceship with remnants of humanity tries to find place to settle but can't. The only step to take is to remain on the Earth and care about it.

Demo

earth day animation freeze-frame
Links:

Journey

It was interesting journey. I have learned about offset-path which is a wonderful tool for animation in CSS. The joy was in creating spaceship, I used reference from science-fiction movies.

Of course, restriction of using JS is a challenge but at the same time it's perfect opportunity to rediscover CSS and learn new features.

. . . . . . . . . . . . . . . . . .
Terabox Video Player