Efeito suave na caixa de busca

Qual é minha questão:
Olá!
Eu estive a ver o efeito que tem no FdF onde a caixa de busca se expande e se contrai de maneira suave, quando clicamos dentro e fora dela.

Tentei reproduzir este efeito em meu fórum, mais não consegui (no Firefox). Veja o código que estou usando:

#search #keywords {
width: 150px;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
}

Eu consigo esse efeito com perfeição se eu acessar qualquer um com o motor webkit (Google Chrome, por exemplo), mas no Firefox não consigo o mesmo.

Como faço para que funcione no Firefox?

Medidas que eu tomei para corrigir o problema:
Já tentei várias formas e não obtive sucesso

Links e imagens do meu problema:


Endereço do meu fórum:
http://superligado.forumeiros.com

Versão do meu fórum:
PHPBB3

Utiliza este código

Código:

#search-box{margin-bottom:5px}search-box input.button2{-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f5f5f5;background-image:-o-linear-gradient(top,whiteSmoke,#F1F1F1);border:1px solid rgba(0,0,0,0.1);border-radius:2px;color:#666;cursor:pointer;font-size:11px;font-weight:700;height:29px;line-height:27px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}#search-box input{-moz-box-sizing:content-box;background:#fff;border:1px solid #D9D9D9;border-width:1px;color:#000;height:23px}#search #keywords:focus{width:290px}#search #keywords{-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;width:150px}

Olá!
Não funcionou.

Olá,

Aceda a: Painel de controleVisualização Imagens e CoresCoresAba Folha CSS.

Cole o codigo e salve.

Código:

#search #keywords {
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: white;
width: 95px;
}
#search-box input {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-width: 1px;
color: black;
height: 23px;
border-image: initial;
}

Cordialmente.

Muito obrigado, consegui o efeito!