flippin' bars with CSS variables (WebKit only)

flippin-bars-with-css-variables-webkit-only.markdown

flippin' bars with CSS variables (WebKit only)

Watch me code this in9 minutes (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

• or this t-shirt (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, 984021, 1264520 and 1296209 for Firefox, issue #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.

A Pen by Ana Tudor on CodePen.

License.

index.haml

- 12.times do
	.bar

scripts

<script src="https://codepen.io/thebabydino/pen/evPbxv.js"></script>

style.scss

$n: 12;
$t: 3.62s;
$r0: 11;
$r1: 255;
$w: .75em;
$h: 4.5em;
$k: .06;

.bar {
	--i: 0;
	position: absolute;
	top: 50%;
	left: calc(50% + (var(--i) - #{.5*($n - 1)})*#{2*$w});
	animation: flip0 $t linear infinite;
	
	@for $i from 1 to $n { &:nth-child(#{$i + 1}) { --i: $i } }
	
	&:before {
		position: absolute;
		margin: -.5*$h (-.5*$w);
		width: $w; height: $h;
		border-radius: 3px;
		box-shadow: 0 0 0 $w/3 #fff;
		background: rgb(calc(#{$r0} + var(--i)*#{round(($r1 - $r0)/$n)}), 50, 100);
		animation: flip1 $t ease-in-out calc(var(--i)*#{-$k*$t/$n}) infinite;
		content: '';
	}
}

@keyframes flip0 { to { transform: rotate(.5turn) } }

@keyframes flip1 {
	0%, 50% { transform: none }
	#{50% + $k*100%}, to { transform: rotate(.5turn) }
}

styles

<link href="https://codepen.io/thebabydino/pen/evPbxv.scss" rel="stylesheet" />