See the Code - See it Full Page - See Details
This is a fork of my Single Div Accordion that has less broad browser support... but only uses CSS for all the animations. The original uses `requestAnimationFrame` to handle a lot of the inner animations due to only Chrome/Opera allowing CSS Variables in `@keyframes`. But the spec says it should work, too... so this can be a check for future browser support. Original Pen description: First attempt at Single Div Art. Wanted to see how Custom Properties (CSS Variables) can help with organization and animation. I am in awe of people who do single div art regularly. And as always seems to be the case, I am now on the other side of working on this with a fuller understanding of `background-size` and `background-position` especially in relation to relative gradients. In addition to `requestAnimationFrame` and CSS Variables. Works well in everything that supports Custom Properties, except I cannot get it to render in Edge. Fixed a crashing bug in Edge by changing how the `clip-path` is used (and reporting a bug), but there are other issues as discussed in the comments here.
This Pen uses: HTML, CSS, JavaScript, and