Browser support for CSS3 transitions

[weegillis]

I've just taken the plunge (2 years late?) in elementary CSS3 transitions, and discovered that while we're told that Opera 11.50 supports it, I've hit a snag:

From the get go, I sought out and borrowed code from the ever popular, ever trustworthy AListApart. My version is only slightly different from that of the article, Understanding CSS3 Transitions; by DAN CEDERHOLM

CSS

li.nav a {
 display: block;
 width: 100%;
 height: 1.3em;
 /* background transition */
 -webkit-transition: background 0.5s ease;
 -moz-transition: background 0.5s ease;
 -o-transition: background 0.5s ease;
 transition: background 0.5s ease;
}

The only problem, Opera isn't responding. The element inspector reveals that all the property values are empty, meaning possibly that the shorthand in Dan's example is not recognized, though I cannot see how that could be.

Has anyone else discovered inconsistencies of this nature in Opera 11.50?

[deepsand]

You're way ahead of me here; I'm still doing assemembly language using 2-Tape Autocoder for the IBM 1401.

Given that CSS3 is still very much a work in progress, so that implementations are at present very much vendor/product dependent, you've quite likely run against just that.

While I don't know if he's worked with CSS3 yet, given that kgun is our resident Opera aficionado, you might reach out to him.

[chrisJumbo]

Forgive me if I am missing something, I haven't worked with CSS3, but doesn't the background need a color specified?

[weegillis]

Forgive me if I am missing something, I haven't worked with CSS3, but doesn't the background need a color specified?

In this particular case it is declared dynamically with a DOM script. The background colors are there, though.

For a live example, go the Transitions mini-site in my district sig link. It's in the Camp story section. The transition allows me to create a mouse trail on the navigation bar, as a consequence of the 1/2 second ease transition.

Note:
The topic here, CSS3 transitions is in no way connected to the title of the book transcribed in the mini-site. Their similarity is only coincidental.

You can also see in FF and Chrome the 2-column effect, also a CSS3 property.