CSS3 Transitions in jQuery UI Themes

You can add CSS3 transitions to your jQuery UI theme without much effort. You can use a single selector to apply the same transitions to multiple jQuery UI widget components. As a simple example, the following code illustrates how we can apply CSS3 transitions to the hover state for buttons, accordion headers, and tab navigation.

.ui-accordion-header,
.ui-button,
.ui-tabs-nav > li
{

    /* Default CSS3 transition property */
    transition: font-weight 1s,
                color 1s,
                background 1s,
                border 1s;

    /* Firefox transition support */
    -moz-transition: font-weight 1s,
                     color 1s,
                     background 1s,
                     border 1s;

    /* Chrome/Safari transition support */
    -webkit-transition: font-weight 1s,
                        color 1s, 
                        background 1s,
                        border 1s;

    /* Opera transition support */
    -o-transition: font-weight 1s,
                   color 1s,
                   background 1s,
                   border 1s;

}

You can simply add this style to your theme's CSS. The reason we're being very selective in where we're applying these styles — buttons, accordion headers, tab navigation — is that we're aiming to apply transitions to the mouse hover behavior. These components are by no means the only ones that support hover behavior. But they're the obvious ones, where users are most likely to notice the visual enhancement. The style works when the ui-state-hover class is applied to the component. The properties we've outlined in our style — font-weight, color, background, border — are the key visual aspects of the hover state change.