From time to time it's important to give back to the community. After all, it's only fair to return the favor - we download, we view, we read articles, tutorials for free thanks to the great and almighty Internet. The resources are infinite and for that commitment, it seems nice to share back, to be part of that community.

Having these thoughts in mind, I made a freebie I like to show the world (actually, my first freebie on this blog - there will be more ;) ). I am a comic-book fan and I like to draw cartoon characters. There's nothing new about this. So I made a crossover between Lego Batman and Batman Beyond which I decided to "draw" using only HTML5 and CSS3, instead of Illustrator. Everything is made with CSS3 shapes and animations and the result it's quite rewarding. There are no images what so ever, no Javascript is required and all it's made from scratch: the ears, the eyes, the movement, even the Batman logo on his chest.

You can test the animation yourselves. Any sort of constructive feedback is much welcomed and appreciated.

How to get it

I know it's not perfect and it still needs refinement, but this is just the beginning. Feel free to edit, correct or improve it in any way possible. Let your imagination loose! You can view the dedicated Pen on Codepen or check out this Gist on Github.

Enjoy!

See the Pen Lego Batman Beyond HTML5/CSS3 animation by Alecsandru Grigoriu (@Alecsandru) on CodePen.

PS: From what I tested so far, the best performance I had was on Firefox. On Chrome it displays a little flicker at the end of the cloud animations. On the other hand, Safari displays the cloud animation horizontally. On Opera the flickering reappears and on Internet Explorer... well it works and it doesn't - no comment.

LATER-EDIT: I made a workaround and managed to solve the flicker in Chrome. So I recommend you give it a try on Chrome and Firefox.

LATER-EDIT: Thanks to my dear buddy, Eddie, I managed to solve an issue on Chrome. Now the animations can run locally.