how to create css3 smooth transition for all browsers ?

i am trying to do smooth css3 transition animation in my web page thats not doing smooth animation in my web page but working fine in jsfiddle

Here is my code

HTML :-

<div class="topl" id="img">
    <img src="http://ift.tt/1wOKt9F"/>
</div>
    <button>click me </button>

CSS :-

.topl {
    position: absolute;
    z-index: 11;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    top: 25%;
    width: 500px;
}
.topl img {
    width:500px;
    border:1px solid #000;
}
.topl_1 {
    position: absolute;
    z-index: 11;
    top: 45px;
    left: 35px;
    right: 0;
    width: 160px;
    margin: 0 55px; 

}
.topl_1 img {
    width:160px;
    border:1px solid #000;
    transition : width .3s;
    -webkit-transition: width .3s

}

Jquery :-

$('button').click(function() {
    $('#img').toggleClass('topl topl_1');
});

Please help me out