loader image

The beauty of CSS animation

I am really fond of small and neat CSS animations that go beyond button design.

Share This Post

Since most of my time as a web designer, I spend writing and changing CSS and I tend to appreciate when someone creates very simple and neat tricks with CSS. Especially when it’s not just a hamburger button or loading bar. While just scrolling through www.codepen.io I stumble across beautiful and simple effect made by Piotr Galor. The beauty of this effect is there are no SVG or any Java, it’s animated by using border-radius, opacity and basic CSS properties.

As you can see below I’ve implemented this effect for www.guzimage.com  using the only CSS without any Java. The only image here is a white logo that I’ve done in After Effects and converted to APNG (animated PNG, refresh the page if you haven’t seen the animation) but the rest is a simple CSS code.

It’s only 93 strokes of code and I think it could have been even smaller. You can open the Developer Tool in Google Chrome and see for yourself. 

you might also like

GRAPHIC DESIGN

Web design, corporate style, motion design

CONCEPT ART

2D and 3D art for video games

ARTWORK

Illustration for books and games