Here is a link from my twitter feed (credit to Jeff Siarto). It's a pretty good collection of sites that are built around the idea of responsive design with CSS media queries. Some pretty impressive stuff in there. Thought I'd share.

I noticed with the new twitter launch, when you type into the username field, the label text fades away by shrinking/fading. So I recreated the effect here using CSS3 transitions. I think it's an interesting effect, easy to create, and works well.

This is just a sample CSS Pin Wheel I made. It uses CSS3 transitions to rotate, so it works 100% in Chrome, Safari, and Firefox. In IE9 it degrades gracefully since IE9 supports transforms. Currently doesn't work in anything less than IE9. If this wanted to be used on a site, I'd recommend putting a CSS conditional statement in the header and just rendering out the page differently for the folks. Only JavaScript used is to re-calculate the size of the boxes when the window is re-sized and change a class when the navigation is clicked. Some limitations with this might be that there are only 4 "slides" you can have (without making it more complex), and you'd have to do something if you wanted to scroll with your content in one of the "slides".

In creating a slider like this, it seems to be a lot easier with transitions than I would imagine using just JavaScript. Seems like CSS transitions/animations will make things a lot easier. Any feedback on the idea is welcome.

I got a pretty good response on the first one (see first post here), so I actually added a few things to my CSS3 day cycle animation. In doing so, it appears that Safari is a little more difficult in dealing with animations, especially when it comes to masking, but overall, I have them close in display.

If anyone knows anything about the Safari bug I mention, please let me know. Again, I think it's not very practical, but it was a good learning experience. Let me know of any feedback.

UPDATE: Just pushed out an update for Safari. The animations should be working now in Safari and Chrome.

This is a short day cycle animation that I made entirely out of CSS3, no images or JavaScript were used for the animations themselves (I did use some JavaScript to add a class to the body to trigger the animation). My thoughts on CSS3 animations are still slightly in the air (presentation layer vs behavior layer), but it seems they are extremely powerful, and in creating this experiment I found that to be true. Along with that, I've found a few discrepancies in how they work already just between Safari and Chrome. There are a few bugs in my experiment in Safari, but I am working to see if I can figure those out. I am also one that leans towards stuff like this being somewhat irrelevant to the web (a bunch of empty divs don't really mean much in terms of a website), but this was actually quite entertaining putting this together and somewhat of a valuabe learning experience.

Any feedback or suggestions is welcome or ideas of additions to an animation cycle.