Animating Single Div Art | CSS-Tricks

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 opacity or 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 div.

Source: Animating Single Div Art | CSS-Tricks

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s