Troubles getting CSS transition to work

Asd.Alrafedain

New Member
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 \[code\]transition\[/code\] nor \[code\]-o-transition\[/code\] 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\[code\]div {transition:background 2s;}div:hover {background:lime}\[/code\]OK so far, and I can also make it so that the background fades in, but not out, by writing\[code\]div:hover {transition:background 2s; background:lime}\[/code\]and that the background fades out, but not in, like so:\[code\]div {transition:background 2s;}div:hover {transition:background 0s; background:lime}\[/code\]But I don't understand why that happens. According to the docs, a transition with a \[code\]0s\[/code\] duration isn't supposed to have any effect, so why does the last one have a different result?jsFiddle
 
Top