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.
This first takes the Yin Yang symbol and rotates it infinitely. My first approach attempted to rotate the
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.
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
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
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.
RERUN button to see him in action.