CodePen is fast becoming the go-to place to show off what we can do with our web creations. Here’s a list of some of the great stuff

people have been creating with CSS animations recently!


Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

This is a lovely example of combining CSS transitions, SVG graphics and JavaScript to position the hands on a cute Mickey Mouse watch face.

Submarine with CSS by Alberto Jerez (@ajerez).

Gorgeous use of the circular port-hole shaped container gives this CSS-animated submarine a lot of charm.

AT-AT by Tim Pietrusky (@TimPietrusky).

Star Wars inspired AT-AT personnel carrier, drawn using text with the colours cycled in CSS. A funky effect.

Loader SVG/CSS by Bidji (@Bidji).

This loader uses the changing colours to give the impression of rotating.

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS can be used to create some amazing 3D effects. Here’s a 3D tardis:

Dozing Bird by Peter Klein (@pmk).

Simple art style and just the right amount of animation give this sleepy bird the illusion of life.

Pure CSS border animation without SVG by Rplus (@rplus).

Simple yet very effective use of CSS borders to create a loading-style animation.

Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh).

The title from the upcoming Star Wars movie created using CSS, HTML and a little JavaScript.

Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).

Try out the keys and rotating this 3D synth created using CSS. Amazing work:

Cascading Solar System! by Tady Walsh (@tadywankenobi).

A model of our solar system, complete with scaled rotation speed, moons and details on each of the larger planets. The sun is even a live capture of the real thing!

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

Another solar system, but this time in 3D. Beautiful use of shading.

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

Press the shutter on this flat camera to see it create a photo using CSS animation.

Day Night simulation by Szymon Stypa (@Catagen).

Press the button to see day transform to night.

Animate sprite with CSS by Avaz Bokiev (@samarkandiy).

A demonstration of how a sequence of images (sprite) can be used to create stop-motion animation, complete with forward and reverse motion.

Dodecahedron by wontem (@wontem).

A subtle, beautiful dodecahedron created and animated entirely with CSS.

CSS animations are a growing category on Envato Market too. If you want to use animation effects in your projects, you can find everything from shadows to image hover effects, lightboxes and more.

Popular CSS animations on Envato Market
Popular CSS animations on Envato Market

Not long ago, we would have leaned on Flash or JavaScript tools for any in-browser animation. Modern browsers have brought better support for CSS, with hardware accelerated 3D and animation.

Thanks to sites such as CodePen, we can share and learn more easily than ever before. What are some of the most inspiring animation demos you’ve seen recently?