CSS transitions
Posted on 7th November 2007 in CSS, Open Standards | 17 Comments »
WebKit has introduced another great feature – CSS animation. It is simply amazing what you can do with CSS transitions combined with CSS transforms.
Transitions can be specified using following properties:
transition-property
transition-duration
transition-timing-function
transition
For example
img#testimg1 { opacity: 1; -webkit-transition: opacity 1s linear; } img#testimg1:hover { opacity: 0; }
would fade out the image if rolled over:
Combining transitions with transforms in (X)HTML like this
<img style="-webkit-transition: -webkit-transform 5s ease-in;" onclick="this.style.webkitTransform='rotate(360deg)'" src="image.png" alt="" />would flip the image 360 degrees in 5 seconds time on first click:
Please note that you would need WebKit for the above samples to function properly.
17 Responses
Isn’t this just more stuff that you’ll never get to use?
Quite possibly so because I was unable to find any equivalents in W3C working drafts which is why the article doesn’t talk about CSS3. BUT by Dave Hyatt, architect of WebKit, this is going to be proposed for inclusion in CSS specs.
Fade?? what fade. this ain’t working
Joe: as stated above the functionality works only in the latest nightly of WebKit.
More on WebKit
Chances are that at some point something along the lines of these transitions will be added to CSS. Webkit have made more headway than anyone else with CSS, so it is likely that the W3C will take their ideas seriously.
I fully agree with David.
There are a number of arguments against all of it. In circumstances they involve Internet Explorer that is in fact holding back innovation. No matter how hard Mr Hyatt works it into the standards if no one really takes it to the end user.
So here’s a call for the developers – use Cascading Style Sheets. At the latest level possible for a project. At some point it will make a difference and it doesn’t actually hurt to introduce some CSS3 like
opacityortext-shadow.One little problem with using CSS3 propriety attributes is that they are invalid. I don’t know if you can have conditional Safari stylesheets like you can with IE?
The above mentioned properties validate. Please see the CSS3 sample file.
By my knowledge there is no way to write conditional style sheets for Safari.
Many nonbrowser applications use webkit as an easy way to do advanced rendering.
Do anybody know if this css transitions stuff will let me move objects around by setting top:y; left:x ?
Interesting stuff! No Flash required! But can you make the second example work on every click? I was disappointed I could only watch the animation once.
This stuff needs to be added to if not the css 3 then at least the next css standard. Thats amazing, i have been waiting for the day when css will replace flash for years, i hope that day is getting closer.
This is interesting. It doesn’t work in firefox or IE, but it sounds like it’ll be pretty big once it does. I work with flash sometimes, and one of the best things about flash is the feel of an instant update. Obviously, this is being implemented in Java Applets, so count that out. The ActionScript looks like it’s going to be replaced with CSS and PHP. Flash’s advantages are being taken out left and right. One thing that Adobe is working on, is getting the texts to be readable by Google and other search engines to solve the SEO problem. I once thought flash was the future, but now I’m having some second thoughts. I know some PHP and CSS, I started working with Java Applet just recently. The biggest downfall of flash is that you can’t really manipulate the entire page, unless the entire page is done in flash. I don’t like to do that. I like using flash in different parts of the site for things like style pickers for a user’s profile, or a music player. I don’t think all of FlashPlayer’s functions will be replaced until at least 5-10 years. (More leaning towards 5)
Hey this looks really cool. Shame it would only work in Safari and isn’t CSS valid.
Sam: CSS Transitions Module is marked as upcoming medium priority Working Draft at W3C so it is very likely to be there in the future.
W3C:
CSS Transitions Module @ W3C CSS WG
Check Opera 10.5 transitions support in Opera 10.5 beta.
Download it here: http://www.opera.com/browser/next/
Transitions article: http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/ (nice example at the end).
I strongly disagree with Spence. I once thought like that as well, that flash was an out of date technology, but in fact, the information being fed to me, from bloggers and tech gurus alike, was kind of taken to the extreme.
If a theory cannot be understood by a two year old, it’s not a good theory.
Heres the theory I’ve come up with in my thesis:
Web Standards is presenting a quality design to all users, while displaying a less attractive design for the others.
The fact is, some BASIC css features are still not implemented correctly in IE, or they’re implemented with a different set of “standards”… MS has always been the company to hold the web community back. Poor implementation and interface… Thats why I don’t design with anything <= IE6 in mind. I will present them with a banner, at the top of their page. Thats my solution.
So in fact, flash is going to be around for a while, I believe. Though there are other vector / oop based technologies emerging (silverlight i believe?)
Kevin: yes, not only Silverlight, but SVG canvas animation as well, in many occasions referred to as HTML5.
The thing that many are ignorant about, is that Flash provides the tools and hardware acceleration/optimisation for web animation. I’m gladly using HTML5 versions of YouTube and Vimeo myself and I think it’s superb that we have a native way of playing it back now, but Flash has always evolved and there are no standards-based alternative to many of its uses. It’s the matter choosing the right tools for the right thing and complaining are those who fail at it.