CSS animations

I've been following the CSS in-depth course by
Estelle Weyl
on Frontend Masters
to learn much of this stuff. I recommend you go check out her work. The slides
she use while teaching comes with a bunch of examples and playgrounds and
are available on her website.

Toggle the animation play state using the button below, or press
Enter.

The animation toggle requires JavaScript.

CSS animations

Spinning a vinyl record

A vinyl record spinning on its Y axis

Animating shape-outside

I mentioned in the
CSS shapes lab that shape-outside
could be animated. Below is an example.

Please never do this in a way that affects important text 🙈

This is an example of an image with a shape-outside. The image is already
transparent so I don't need to clip it as well. The effect really only
comes into play if there is enough text to wrap around some of the shapes,
so here is a little bit more text. The image is one I drew as an exercise
in using the Apple Pencil in Pixelmator. I wrote a few words on it on the
ol' blog.