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. You'll find lots of great animations on CodePen. Deselect the checkbox and use the arrow buttons to watch each frame move.ĭodecahedron image animation in CSS by wontem ( CodePen, find this subtle, beautiful dodecahedron created and animated entirely with CSS. Beautiful use of shading.įlat design camera with CSS animation on CodePen by Damien Pereira Morberto ( the shutter on this flat camera to see it create a photo using CSS animation.ĭay Night simulation by Szymon Stypa ( the button to see day transform to night.Īnimate sprite with CSS by Avaz Bokiev ( demonstration of how a sequence of images (sprite) can be used to create stop-motion animation, complete with forward and reverse motion. The sun is even a live capture of the real thing!įull CSS 3D Solar System by Julian Garnier ( solar system animation on CodePen, but this time in 3D. Amazing work:Ĭascading Solar System! by Tady Walsh ( model of our solar system, complete with scaled rotation speed, moons and details on each of the larger planets. Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov ( out the keys and rotating this 3D synth animation created using CSS and shared on CodePen. But this animation using CSS, HTML and a little JavaScript should have nothing but fans. Star Wars: The Force Awakens in CSS by Donovan Hutchinson ( newest trilogy from the Star Wars franchise has its detractors. Pure CSS border animation without SVG by Rplus ( yet very effective use of CSS borders to create a loading-style animation. Here’s a 3D tardis animation found on CodePen:ĭozing Bird by Peter Klein ( art style and just the right amount of animation give this sleepy bird the illusion of life. It's a simple yet cool animation in CSS found on CodePen.ģD CSS Tardis by Gerwin van Royen ( can be used to create some amazing 3D effects. Loader SVG/CSS by Bidji ( loader uses the changing colours to give the impression of rotating. It's a funky image animation CSS found on CodePen.

Submarine animation with CSS in CodePen by Alberto Jerez ( use of the circular port-hole shaped container gives this CSS-animated submarine a lot of charm.ĪT-AT by Tim Pietrusky ( Wars inspired AT-AT personnel carrier, drawn using text with the colours cycled in CSS. Pure CSS watch animation by Grzegorz Witczak ( is a lovely example of combining CSS transform (rotate and translate) to position the hands and the day/night indicator on a stylish watch face.

Simple css animation examples