Ajax Loader
×

Animated Little Prince CSS3 Illustration

The Little Prince animation done purely in CSS3 without using any javascript. The whole illustration is drawn by using CSS3 shapes and advanced techniques like skewing, rotating etc. The animation is done using the animation and keyframes properties of CSS3 so this will only work in Webkit borwsers and Mozilla Firefox.

There are too many divs used to render every single object. This could be reduced by using :after and :before pseudo elements but that would create a problem when it comes to managing the shapes and positioning them. This animated illustration shows the power of CSS3 upto a very large extent however it must not be used in any real world projects as it's support is very limited currently. Take a look at the code to understand more.

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Animated Little Prince CSS3 Illustration

    CSSDeck G+