CSS transition not able to work with Orbeon Control

I am trying to include css transition for hover of a control label.

<xh:html xmlns:xh="http://www.w3.org/1999/xhtml"
         xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
         xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
         xmlns:saxon="http://saxon.sf.net/"
         xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
         xmlns:xf="http://www.w3.org/2002/xforms"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:sql="http://orbeon.org/oxf/xml/sql"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xi="http://www.w3.org/2001/XInclude"
         xmlns:exf="http://www.exforms.org/exf/1-0"
         xmlns:xs="http://www.w3.org/2001/XMLSchema"
         xmlns:fb="http://orbeon.org/oxf/xml/form-builder"
         xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         fr:data-format-version="4.0.0">
 <xh:head>
        <xh:title>Playground</xh:title>     
<xh:style type="text/css">
            #extra {
              -webkit-transition: width 20s; /* For Safari 3.1 to 6.0 */
              transition: width 2s !important;
              transition-timing-function: ease-out;
            }
            #extra:hover {
              width: 600px;
            }
</xh:style>

In the label of a text field, i defined the following:

<div id="extra" style="background-color:red">Special Field</div>

When i tested it, the width becomes 600px upon hover, but the transition is not working.

How can I make the css transition work?

Thanks.