This is not my first time making [dancing hexagons](https://codepen.io/danwilson/pen/LWPavK)… but the tiling is so much simpler and more consistent now with CSS grid.
I made the original dancing hexagons to show off individual transform functions (via `transform` + CSS variables).
This pen is a chance to use Houdini and CSS keyframe animations instead of a bunch of setTimeouts + CSS Vars (as I did in the original dance)… as such the full experience is only in Chrome Canary with Experimental Web Platform Features as of 2/2018.
### Why this is interesting…
There is one `transform` for each hexagon, consisting of a `scale`, three rotations in the X and Y axes each, two rotations in the Z axis, and two translations in the X and Y axis each. There is a CSS Keyframe animation that is only modifying the custom properties (CSS Variables) that make up the initial `transform`. So one rotation can be animated independently from the other functions, for example.
As an added bonus… one X and one Y rotation are never modified by the keyframe animations (`–rx3` and `–ry3`). They are instead changed via JS when your mouse/finger/pointer moves with Pointer Events. A transition is applied for those two custom properties so everything animating is kept smooth.
To be fair, I kinda just like the simple scaling of the base experience, too. I find it soothing.