Colocar efeito de caixa buscar suave

Detalhes da questão

Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Olá!

Eu estou a usar este código para a caixa de buscar no fórum, basicamente como a do FdF:

Código:

#forum-search .inputbox, #search .inputbox, #search_menu .inputbox, .inputbox.desc_search_input {
    background: #FFF;
    border: 1px solid #39C;
    border-radius: 3px 0 0 3px;
    height: 22px;
    margin-right: -2px;
    padding: 3px;
}
#forum-search .button2, #search input.button2, #search_menu .button1, .desc-search input.button2 {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #39C;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 0;
    height: 30px;
    width: 30px!important;
}
#search-box #keywords:focus {
    width: 300px!important;
}

E ao clicar nela aumenta a caixa de escrever, só que não é efeito suave ou seja é instantâneo, seria possível colocar como o da FdF suave?

Olá,

Seria isto? (Aplique em seu CSS)

#search-box #keywords{
padding-right: 20px;
transition: 500ms;
width: 130px;
}
#search-box #keywords:focus {
width: 300px;
}

Att.

Olá!

Caso o código do Ace por ventura não funcione, adicione à sua folha de estilos:

Código:

#search-box #keywords:focus { transition-duration: 0.5s; }

Abraços.
Fraise

Obrigado a ambos mas o código do Ace resultou na perfeição, resolvido!