Ok, I'm so mega busy right now working on Flurl. I need to have it done TONIGHT because I've got other pressing obligations coming up and I just won't have any time to work on it after today.
I wanted to have movement and sound and I wanted it REALLY CORNY as an homage to the flickr pandas from whom it gets it's photos.
That's just a little taste. It's going to be much more. It's going to have music and it's going to have a photo stream.
First I designed the animation:
Yeah, really simple I know. I'm just telling it to rotate from 0deg to -364deg. Note that I named the animation "turnit".
Next I applied the animation to my div.
Line 1: use the animation "turnit" we defined before. NOTE THAT THE ANIMATION DEFINITION MUST COME BEFORE WE TRY AND APPLY IT. If I tried to use it before I defined it in my stylesheet, nothing would happen.
Line 2: Loop forever.
Line 3: Last for 30s.
Line 4: Make it smooth (linear). Could ease-in or out or whatever, but I wanted it to be seamless with no apparent start or stop.
Notes: If you look at the source you will see that I made my turning div 3200px wide and tall and then put it inside of a container that was 100% wide and tall and overflow hidden to keep there from being scrollbars. I then positioned the div so the center of it would be right under the unicorn's foot.
Here's the entire "view source":