A while ago, @codepo8 tweeted the following:
My first thought was that he was serious about it and I could see where he was coming from, so I decided that it would be an interesting way to learn more about CSS3 animations etc
Challenge. Prince's amazing music video of "Sign 'O' the times" could be done purely in CSS - vimeo.com/31651285— Christian Heilmann(@codepo8) May 11, 2012
I have managed to get the first minute of the video in CSS3 only - displayed below with the original video, just press play and enjoy.
You can contact me on twitter: @lucadeangeli
Works in Firefox only I was too lazy to double-prefix for webkit too - and perhaps scaled and rotated elements render better in Firefox, as far as I could see.
The code sucks. It's in no way meant to be optimized or to follow any best practices etc - I did this just for fun, mostly in my spare time!
It's not perfectly accurate. You know.
If anyone feels willing enough to improve it / continue its development, you can clone the gitHub repo.
Some pages that I've used to learn more about css animations:
...And if you want to know more about the song: Sign O the times review on BBC Music