Disclaimer: Transitions are a working draft but they have not reached candidate recommendation yet. This thread in no way encourages the premature use of “transitions” on public sites but rather it is set forth to explore the possibilities they have to offer. Please keep all posts on topic and refrain from any Anti-CSS3 comments. Thank You
Maybe you have heard about them, maybe not. I had heard about them but never played around with them until a few days ago. I must say that I am quite impressed by what I have seen so far.
Current Support:
From what I can see it looks like current support with vendor specific properties includes Webkit (Chrome.4+ & Safari.4+) and Opera.10.5+. The properties are available in FF and from what I have read they do work in their nightly builds and FF4 will be supporting transitions. An FF4 beta version is rumored to be released within a month possibly.
It looks like Webkit has been involved with this the longest since the Blog Post linked below dates back to October 2007. That being the case my Chrome and Safari versions mentioned above are probably not accurate but that is what I am testing with.
More Info:
You can find more info and live examples in the links below. Opera Web Dev has probably got the best in depth article that I have read through so far. They have got many working demos that compliment each of the properties.
Opera Developer: CSS3 transitions and 2D transforms[URL=“http://webkit.org/blog/138/css-animation/”]
Surfin’ Safari CSS Animation
Mozilla Dev Center: CSS transitions
Live Examples:
A while back I had been involved in a thread that was using a jQuery “Kwick Nav” menu that had roll out anchors on hover.
We had got the menu down where it was using a:hover in the css to simulate the effects if js was disabled. It worked just fine but as you know :hover is instantaneous and I had made a comment that I needed a :hover-speed property. It was really just a joke I was making but it looks like “transitions” had exactly what I was looking for all along. It is known as the transition-duration property, values are set in “s” for seconds ( such as 1s, 2s, 3s etc.)
I have taken the basic code of that menu and added transitions to it, view that jQuery menu above and then view my transitions version below and tell me that ain’t close enough to dance with. While I was at it I also made a version of a “Read More” link with a disjointed rollover.
Roll-Out Anchor with Fade-In BG Color
Fade-In Disjointed Rollover
If you will view all these examples in current versions of Webkit and Opera you will see what this is all about. This is about progressive enhancement with modern browsers, both of my demos above degrade gracefully and work in all major browsers.
Let’s see what you can do!
I’d like to see some more “transition” examples from creative minds so feel free to post your code or links to live examples. I consider this an exciting new addition in CSS3 since it gives me the eluded :hover-speed property that I had been searching high and low for. 