CSS Transition effect - How?

[southbeach]

Looking for means to add more "wow" to a site I am working on and thought that using transition effects will be a good place to start.

For instance, one of the pages is a data grid where content is shown w/in a layer. The layer could have any number of rows or blocks, each representing an individual document.

I would like to use something like

.rollsmooth:hover {
  transition-property: background-color;
  transition-duration: 3s;
  background-color: #222;
}

So, given the above code, using

<div class="rollsmooth">
Some text and content here ...
</div>

I am expecting to see the block transition from default color to #222 based on duration value.

This is not working for me. What am I doing wrong?

Thank you all for your help!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[southbeach]

Is this syntax exclusive to -webkit Safari/iPhone?

It appears to be so according to some other things I've found online ...

http://www.sitepoint.com/blogs/2008/04/25/css-gradients-transforms-animations-and-masks/

and a couple other sites. If that is the case, too bad, cause it looks very cool




--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Vragabond]

It's part of CSS3 recommendation. So your transitions will be seen in some 5 to 10 years.

I wish adoption of CSS3 was quicker and that the CSS3 draft would become final, but right now it doesn't look good. Gecko based browsers might get support earlier in a form of a property prefixed by "-moz", although according to the developers, none exists for transitions yet.

So, at the moment you are really limited to Safari, or better say, Webkit based browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[feherke]

Hi

So, at the moment you are really limited to Safari, or better say, Webkit based browsers.

Correct. When prefixed with "-webkit-", they work in Midori too. But I would say is abit buggy : the transition is sometimes skipped if the mouse pointer enters over the element with high speed.

Feherke.

http://rootshell.be/~feherke/

 

[ChrisHunt]

You're probably safer trying to do this sort of thing with Javascript instead of bleeding-edge CSS. There are several frameworks and libraries out there that you could draw on, for example

http://script.aculo.us/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd