I recently tried to animate a sprite of 3 states and the animation was not smooth, actually a little jumpy beetween the state changes. Maybe I didn’t do it right or the transition between images is not done yet? I ended up doing it with jquery.
Transitions on hovers are sweet and add that little extra to web designs. It’s a shame that IE still won’t add these features. Every client I’ve shown a site to in Chrome or Firefox that I’ve designed using transitions always wonder why it won’t show in their browser which is usually IE. Then you have to explain to them why it won’t work in IE which leads to the inevitable question about making it work in IE.
Copy & paste the code below to embed this comment.
Dot+Pixel
Just wondering if there was a browser matrix for the compatibility of this demo. I understand that this article helps explains the theory, but as far as testing goes, I only got it working in OS X Chrome 7.0, but NOT in OS X Opera 10.63 (10.5 was mentioned as having support)
This is the first time that I’ve looked at CSS3 Transitions, and luckily the demo was very well explained and the concept was kept simple. But having looked at the structure of how transitions are defined, I’m a little perplexed;
Why do you give the transition property(s) to the element, and not the element :hover or the element :focus?
Surely it makes more sense to be;
a { color: black; }
a:hover { -webkit-transition: color 3s ease; color: red; }
Which would then enable you to specify other rules, like :focus, to use a different transition.
Am I off the mark here, or does anyone share my opinion?
There is a “wonderful chart of timing functions created by Peter Beverloo”:http://peter.sh/2010/09/last-week-asynchronous-script-execution-and-gpu-acceleration-by-default/.
Opera 11.0/Windows will not apply any transitions to an element, if the shorthand CSS is used.
So this example will not work in Opera:
-o-transition: background 0.3s ease;
And this one will work:
-o-transition: background-color 0.3s ease;
(As far as I know, a bug was filed, hopefully one of the 11.x dot releases of Opera will have this fixed…)
I think it would be good to mention this in the article, since many people perhaps tried the examples right away and may have found that they are not working in Opera. (I was trying to understand why the CSS3 transitions don’t work for quite a while, before a friend of mine mentioned to me this obscure shorthand bug…)
True, but Opera 10.6 (which is much older than version 11) shows the same bug as Opera 11.0—as far as I am able to tell, at least, since I tested both on Opera 10.6 and 11.0. :)
Thanks so much for this post. It was a really cool introduction to CSS3 transitions. This is actually the first tutorial article I’ve read about them. Really helpful thanks.
For all interested, the article didn’t mention one of the chief use-cases for transitions – on devices such as the iPhone/iPad, they’re hardware-accelerated, and as a result much more efficient than using single-threaded Javascript to handle animation timing.
Copy & paste the code below to embed this comment.
Fat Aido
Agreed.
Using Firefox 3.6.3. I am also unable to get the transition to work. Fails on IE v8.0 too.
I made the duration 20 seconds in the hope of seeing some difference and -color to each of the attributes but still no go!?
24 Reader Comments
Back to the ArticleDanilux
I recently tried to animate a sprite of 3 states and the animation was not smooth, actually a little jumpy beetween the state changes. Maybe I didn’t do it right or the transition between images is not done yet? I ended up doing it with jquery.
hurricaneweb
Transitions on hovers are sweet and add that little extra to web designs. It’s a shame that IE still won’t add these features. Every client I’ve shown a site to in Chrome or Firefox that I’ve designed using transitions always wonder why it won’t show in their browser which is usually IE. Then you have to explain to them why it won’t work in IE which leads to the inevitable question about making it work in IE.
Dot+Pixel
Just wondering if there was a browser matrix for the compatibility of this demo. I understand that this article helps explains the theory, but as far as testing goes, I only got it working in OS X Chrome 7.0, but NOT in OS X Opera 10.63 (10.5 was mentioned as having support)
RussellBishop
This is the first time that I’ve looked at CSS3 Transitions, and luckily the demo was very well explained and the concept was kept simple. But having looked at the structure of how transitions are defined, I’m a little perplexed;
Why do you give the transition property(s) to the element, and not the element :hover or the element :focus?
Surely it makes more sense to be;
a { color: black; }
a:hover { -webkit-transition: color 3s ease; color: red; }
Which would then enable you to specify other rules, like :focus, to use a different transition.
Am I off the mark here, or does anyone share my opinion?
Divya Manian
There is a “wonderful chart of timing functions created by Peter Beverloo”:http://peter.sh/2010/09/last-week-asynchronous-script-execution-and-gpu-acceleration-by-default/.
Michel Bozgounov
Opera 11.0/Windows will not apply any transitions to an element, if the shorthand CSS is used.
So this example will not work in Opera:
-o-transition: background 0.3s ease;
And this one will work:
-o-transition: background-color 0.3s ease;
(As far as I know, a bug was filed, hopefully one of the 11.x dot releases of Opera will have this fixed…)
I think it would be good to mention this in the article, since many people perhaps tried the examples right away and may have found that they are not working in Opera. (I was trying to understand why the CSS3 transitions don’t work for quite a while, before a friend of mine mentioned to me this obscure shorthand bug…)
Gonzo
Michel, this article is published Nov 16 and Opera 11 was released a month later – Dec 16: http://www.opera.com/docs/changelogs/windows/
Michel Bozgounov
@Gonzo:
True, but Opera 10.6 (which is much older than version 11) shows the same bug as Opera 11.0—as far as I am able to tell, at least, since I tested both on Opera 10.6 and 11.0. :)
kAlbs
Thanks so much for this post. It was a really cool introduction to CSS3 transitions. This is actually the first tutorial article I’ve read about them. Really helpful thanks.
ryanmcgrath
For all interested, the article didn’t mention one of the chief use-cases for transitions – on devices such as the iPhone/iPad, they’re hardware-accelerated, and as a result much more efficient than using single-threaded Javascript to handle animation timing.
XaviJr
Strange, i’m trying your example of the background transition and it doesn’t seem to work on Firefox 3.6.13 or Opera 11, only works on Chrome.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
Fat Aido
Agreed.
Using Firefox 3.6.3. I am also unable to get the transition to work. Fails on IE v8.0 too.
I made the duration 20 seconds in the hope of seeing some difference and -color to each of the attributes but still no go!?
a.foo
{
padding: 5px 10px;
background-color: #9c3;
-webkit-transition: background-color 20.0s ease;
-moz-transition: background-color 20.0s ease;
-o-transition: background-color 20.0s ease;
transition: background-color 20.0s ease;
}
Fat Aido
Yay! Just installed mozilla v4.0 and that fixed the problem. When will IE catch up?
hendriono
Very easy to learn and understand… Thanks Dan…