Problème de transition

Bonjour,

J'ai un problème avec un code. J'utilise bootstrap paper de Bootswatch.

Ce que je fais

Ici je crée une transition pour passer de 180px à 300px en2s.

voici le CSS:

input.extensible{
    width: 180px;
    transition: width 2s ease;
}

input.extensible:focus{
    width: 300px;
}

Le code HTML(j'utilise le barre de navigation de bootstrap):

<div class="navbar navbar-default navbar-fixed-top">
    <div class="collapse navbar-collapse">
        <form class="pull-right navbar-form">
            <input type="text" class="input-sm form-control extensible" placeholder="Recherche">
        </form>
    </div>
</div>

voici un codepen

Ce que je veux

Je cherche à créer une transition sur l'input ayant une classe extensible(comme sur la barre de recherche de Grafikart.fr)

Ce que j'obtiens

J'obtiens absolument rien, la barre passe à 300px sans transition.

Merci