See the Code - See it Full Page - See Details
Requires Houdini Properties and Values... as of 1/2018 this means Chrome/Opera with Experimental Web Platform Features flag enabled. _So... why is this interesting?_ Each ring is running the same keyframe animation, but have very different `transform`s specified. Each `transform` is a combination of three dimensional rotations and translations. The keyframe animation is not modifying the `transform` property... It is modifying the individual custom properties that build the transformation. Since each `transform` uses the same custom properties but in a different order, the animations all look unique. In the first level of the Custom Properties spec, custom proeprties are not especially smart. Nothing dictates that a variable you make is going to be a length, or a number, or a color, or an angle, etc. Therefore, the spec calls out that animating custom properties should flip at 50%, which is what other properties that can be animated. Only Chrome/Blink even does the 50% flip. Edge, Safari, Firefox all simply do not animate anything. Chrome/Opera will give you a slow stuttering image. BUT with Houdini, we can register each custom property and tell the browser what we expect each property to represent. We can say that we expect `--rx1` to be an angle since I only want that to represent a rotation around the x axis. With just this extra bit of information, the browser has all the information it needs to handle the animation more fully and interpolate values between keyframes.
This Pen uses: HTML, CSS, JavaScript, and