过渡无法在Orbeon中进行悬停

Question

我正在尝试将css转换包含在控件标签的悬停中。

<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>

在文本字段的标签中，我定义了以下内容：

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

当我对其进行测试时，悬停时宽度变为600像素，但是过渡无法正常工作。

如何使CSS转换起作用？

谢谢。