Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is!

As with last week, I'll start this off with an introduction to the Web Animations API. The Web Animations API provides a way for developers to directly manipulate the browser's animation engine using JavaScript.

Creating an Animation

To create an animation using the Web Animations API, we use the Element.animate() function, which takes two arguments; keyframes

So you want to create animated icons for your site?

after illustrating some icons for my personal site, I had the notion of animating them. icons should be relatively small part of the site, so lets make a GIF.

- sigh -

Oh man, that means recreating all my vectors to after effects and then exporting animation to photoshop only to come up with a pixelated ugliness..

That was the time I started seeing that web developers who knows what their doing, are using inline svg’s as icons. some are creating very neat stuff using only live SVG.

first, I’ll have to say, SVG’s arent good for everything. and as always you should ask yourself what about alternaties like

Then a crazy sheet of CSS, but its not that complicated as it looks like. ;)

.pswp__preloader__icn { opacity:0.75; width: 24px; height: 24px; -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; }   /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ .pswp__preloader__cut { position: relative; width: 12px; height: 24px; overflow: hidden; position: absolute; top: 0; left: 0; }   .pswp__preloader__donut { box-sizing: border-box; width: 24px; height