I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues.
Initially, I believed Opera had transition support starting from version 10, but neither transition nor -o-transition seems to function in 11.62. Is there a different syntax that Opera uses?
Nevertheless, with most other browsers, I can achieve a fade-in and out effect on background color when hovering by using this code:
div {transition:background 2s;}
div:hover {background:lime}
That works as expected. Additionally, I discovered that I am able to make the background fade in, but not out, by implementing:
div:hover {transition:background 2s; background:lime}
And similarly, I can make the background fade out, but not in, with the following code:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
However, I am puzzled by this behavior. As per the documentation, a transition with a duration of 0s should not have any impact, so why does the last example produce a different result?