Our Favorite Pen of the Week: Marvel CSS Animation

Each week I look through hundreds of Pens on CodePen, looking for what I feel is the best. Things I look for are creativity, innovation, simplicity, functionality, etc. Most weeks it's nearly impossible to pick just one Pen. This week, the favorite Pen happens to be a pure CSS Marvel logo animation by Gregor Adams.

The Pen

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

Why it's our favorite

As you probably know, this type of Pen has been created before. People love to recreate popular show/movie intros using only HTML and CSS. In fact, Gregor has created more than just the Marvel animation, like this Netflix intro for example. However, unlike most, this Pen is done really well, in a sense that it's almost exactly like the intro that it's based off of. That's no easy task considering the intro is pretty complex.

There are a couple things about this pen that blow my mind.

1. There is only one image used for the entire length of the animation!

2. Average page load time is under 2 seconds. (Including the added requests from CodePen)

3. There is roughly 250 lines of code including both CSS and HTML. (Granted that it uses Jade HTML & SCSS)

Conclusion

This is an amazing example of what can be done with just HTML and CSS. I'm sure many will agree that this is their favorite Pen of the week as well. If for whatever reason you don't like this Pen just check out Gregor's mustache and perhaps it will persuade you to think otherwise.

If you disagree or have something you'd like to say about it, let us know dropping a comment below.

Show Gregor some love!

• GitHub
• @gregoradams
• Google +
• CodePen