flippin' bars with CSS variables (WebKit only)
----------------------------------------------
[Watch me code this in9 minutes](https://www.youtube.com/watch?v=https://youtu.be/HbjYHrWHNMI) (you can also speed it up if you feel I'm typing/ speaking too slow). WebKit only! Firefox and Edge don't support `calc()` as an `animation-delay` value and Firefox doesn't support `calc()` in `rgb()` either. If you like this demo in particular and my demos in general, please consider one of the following:

* getting me something from [my Amazon WishList](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/)

* or this [t-shirt](http://merchdome.com/ACCEPT-Girlieshirt-Restless-and-Wild-Since-1982_1)  (size S) that I couldn't find on Amazon, but I absolutely love

* or at least supportting the implementation of the cool features showcased here:   using `calc()` for any values, not just lengths -  bugs [956573](https://bugzilla.mozilla.org/show_bug.cgi?id=956573), [984021](https://bugzilla.mozilla.org/show_bug.cgi?id=984021), [1264520](https://bugzilla.mozilla.org/show_bug.cgi?id=1264520) and [1296209](https://bugzilla.mozilla.org/show_bug.cgi?id=1296209) for Firefox, issue [#653501](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/653501/) for Edge

* oh, also, why not share this to show the rest of the world what can be done on the web these days?

Thank you!

---

Inspired by this [Geometric Animations gif](http://geometricanimations.tumblr.com/post/156156936168/flipped).

![original gif image](http://68.media.tumblr.com/be7486c62e7e041906238965c82155f1/tumblr_ok49hmGhmb1u8f46ro1_500.gif)

A [Pen](http://codepen.io/thebabydino/pen/RVKyNL) by [Ana Tudor](http://codepen.io/thebabydino) on [CodePen](http://codepen.io/).

[License](http://codepen.io/thebabydino/pen/RVKyNL/license).