Today's #divtober drawing got a little bit out of hand. The word of the day is "slice," so I went for the obvious choice of a slice of pizza. It looked a bit sad, so I added cute eyes and a mouth. Then I made it dance (à la Peanut-Butter-Jelly-Time)... and then I turned it into an audio element so it could dance/sing to the music.

Here's the demo on CodePen:

Unfortunately, due to the browsers' privacy policies, the songs don't autoplay anymore (or not every time). So, the song won't start until you click on the slice of pizza. In order to do that, I had to cheat a little by adding an inline JavaScript command onclick="this.play()".

It was fun using the <audio> tag instead of a <div>. It opened a lot of doors for enhancing the drawing, adding more than just animation. A pity that the audio doesn't support autoplay or play on click without needing JS.

Also, I learned about the :playing pseudo-class (which I was going to use, so the slice of pizza danced only with the music)... unfortunately, it is not supported anywhere.

This is another example of an animation that looks better on Chrome than on the other browsers because of the @property support that allows to animate the backgrounds.