Playing with CSS animations

Note: These will only work in webkit. I'll leave adapting them to non-webkit browsers as an exercise for the reader with too much time on their hands

I recently ran across this article, The Shapes of CSS, exploring shape drawing using pure CSS. I've used a few of these examples as starting points for fun exploration of CSS animations. Check out the pens for the details.

Yin Yang

This first takes the Yin Yang symbol and rotates it infinitely. My first approach attempted to rotate the before and after pseudoelements, that form the two 'eyes' of the symbol, around the centre of the outer circle. This did not work, but simply rotating the element works great as the browser handles the positioning of the pseudoelements relative to their parent.

See the Pen loIkc by Adam Patterson (@adam-patterson) on CodePen.

Space Invader

This example is an interesting approach for drawing with CSS. This guy is just a 1em x 1em block, and then each piece of the figure is accomplished with a box-shadow offset from that block. Animating the figure to do his little space invader dance is accomplished by adjusting the offsets of those box shadows. The movement is a separate animation that changes his position via the left attribute.

See the Pen LlBhq by Adam Patterson (@adam-patterson) on CodePen.

Pacman

When I saw the Pacman example in the article mentioned above I wanted to see if I could animate him to munch whatever it is he munches (cookies?)

I had to change the shape a little. My Pacman consists of two semi-circles, using before and after pseudoelements, that scissor together to get the chomping effect. I animate him across the screen, left to right, using the left attribute. Each 'cookie' is just a circular div with the opacity animated so it fades out. Each is positioned, and the animation is delayed, such that it disappears as Pacman chomps it.

Click the RERUN button to see him in action.

See the Pen pKBHI by Adam Patterson (@adam-patterson) on CodePen.