Boot navigator on extension bar with expand focus from canvas

I am using bootstrap and have a search box in the navbar (as shown in the screenshot), when the field is in focus, it will expand to a specific width of values, but the width cannot be placed in the container (from the canvas) and the expanding transition does not go to the right -to the left, what I wanted,

Can he decide?

Html

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left">
        <li class="hidden">
            <a href="#top"></a>
        </li>
        <li>
            <a class="page" href="#">item1</a>
        </li>
        <li>
            <a class="page" href="#">item2</a>
        </li>
    </ul>

    <form class="navbar-form navbar-right" role="search">
    <div class="input-group stylish-input-group">
        <span class="input-group-addon">
            <button type="submit"><span class="glyphicon glyphicon-search"></span></button>  
        </span>
        <input type="text" class="form-control input-sm searchbox" placeholder="Search">
    </div>
    </form>
    <!-- /.search -->

</div>

      

        
        
        
      

    

CSS

.stylish-input-group .input-group-addon{
    background: #fff !important;
    padding: 5px !important;
}
.stylish-input-group .form-control{
    border-right: 0;
    border-left: 0;
    box-shadow: 0 0 0; 
    border-color: #ccc;
}
.stylish-input-group button{
    border: 0;
    background: transparent;
}

input.searchbox {
    width: 130px !important;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
}

input.searchbox:focus {
    width: 130% !important;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    transition: width 0.5s;
}