CSS Animations

As one of my usual small experiments (edit: now known as the OneNightDev series) I wanted to do something fun with the NOS logo. I realised I hadn't done much with CSS Animations for a while so I combined the two. I created my own version of the logo, where all the circles from the O were animated seperately. After talking to another frontend developer and seeing the slight disappointment on his face when I told him it were mostly images, I agreed it could be better... So I recreated the entire thing in just CSS, this time only using a fallback image for older browsers. When looking at the source of the CSS animations you'll it's a bit messy. It was really easy to setup because I created a SASS mixin to help me generate all CSS using a single function :) A screenshot of the page (but the animated version looks so much better!):

I am aware that the font is not corresponding to the original logo, but this will have to do for now.