See the Code - See it Full Page - See Details
This has four separate CSS Animations, with each affecting a different function within the transform property. Typically, this would only show one animation since the property would be overriding the previously set values on transform. However, with an extra line of JavaScript from the Web Aninations API, we can now tell these Animations to add the transforms together. This works in latest Firefox, Edge, and Chrome. It also can be seen in the latest Safar Technology Preview (it appears to not have made the cut for stable Safari 14, at least on iOS)
This Pen uses: HTML, CSS, JavaScript, and