One thing that single
div pieces rarely do is animate. If you can transform your
div or one of its pseudo elements, that's fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the
transform of the individual "elements" you create inside your
div, since they are not actual DOM elements.
I am a big believer of trying something a little different and interesting to learn tools you otherwise might never learn. Working with the constraints of a single
div might not be great for production work, but it can be a great exercise (and challenge) to stretch your skills in a fun way. In that spirit, we'll use this technique to explore how Custom Properties (CSS Variables) work and even provide us a path to animation inside our
CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… …