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.

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 🙈

Siege tank from StarCraft 2, copyright of Blizzard Entertainment

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 of a contraption from the Starcraft universe, and the copyright belongs to Blizzard Entertainment. I use it here only for educational purposes since it's pointy.