CSS Ease-out transition not working

Question

I'm working on a development site at http://goo.gl/cgR84k

The top search bar, i've got the CSS as follows:

#header #search input {
    height: 33px;
    font-size: 15px;
    padding: 2px 37px 2px 12px;
    border-radius: 7px;
    color: #919191;
    background-color: #fff;
    border: 1px solid #dadada;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
     transition: width 0.5s ease-out;
}

#header #search input:focus {
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width: 384px;
}

The transition/easing effect isnt working in ANY browsers - the strange thing is, i had this exact same code on a search input with prestashop and it worked perfectly, now with opencart it isnt working.

Can anyone shed some light for me please?

Answer 1

Set a starting width on the input.

#header #search input {
    width: 200px;
}

The transition will then account for the difference between the old and new widths.

Answer 2

You haven't set a width on the base state so the browser can't do the math.

Add a base width to the #header #search input

Say, 200px.

Answer 3

Working fiddle: http://jsfiddle.net/LmCEY/

You forgot to specify the width before focus.

#header #search input {
    height: 33px;
    font-size: 15px;
    padding: 2px 37px 2px 12px;
    border-radius: 7px;
    color: #919191;
    background-color: #fff;
    border: 1px solid #dadada;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width:100px;
}
#header #search input:focus {
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width: 384px;
}