CSS transitions
Posted on 7th November 2007 in CSS |
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 src="image.png" style="-webkit-transition: -webkit-transform 5s ease-in" onclick="this.style.webkitTransform='rotate(360deg)'" />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.
14 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