Question

I’m trying to get my head wrapped around CSS3 transitions, and I’m not sure if there is something wrong with my understanding, or if the browsers aren’t cooperating.

First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?

Anyway, I can make a background color fade in and out on hovering with most other browsers by writing

div {transition:background 2s;}
div:hover {background:lime}

OK so far, and I can also make it so that the background fades in, but not out, by writing

div:hover {transition:background 2s; background:lime}

and that the background fades out, but not in, like so:

div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}

But I don’t understand why that happens. According to the docs, a transition with a 0s duration isn’t supposed to have any effect, so why does the last one have a different result?

jsFiddle

Answer 1

From your example it looks like it’s behaving as I’d expect it.
The transitions run from one state to another.

I’ll try an explain this as best I can.

On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it’s hover state.

So what is happening?

1. When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
2. When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.

Does this explain what is happening and how the transitions work?