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.
