Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save andersdn/113f3269a0903c5fe16447f45524b24c to your computer and use it in GitHub Desktop.
Save andersdn/113f3269a0903c5fe16447f45524b24c to your computer and use it in GitHub Desktop.
flippin' bars with CSS variables (WebKit only)

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.

original gif image

A Pen by Ana Tudor on CodePen.

License.

- 12.times do
.bar
<script src="https://codepen.io/thebabydino/pen/evPbxv.js"></script>
$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) }
}
<link href="https://codepen.io/thebabydino/pen/evPbxv.scss" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment