Как создать css3 плавный переход для всех браузеров?

Question

я пытаюсь сделать плавный CSS3 анимации перехода в моей веб-странице это еще не делает плавную анимацию в веб-страницы, но работает нормально в jsfiddle

Вот мой код

HTML: -

<div class="topl" id="img"> 
    <img src="http://www.hollywoodreporter.com/sites/default/files/2012/12/img_logo_blue.jpg"/> 
</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'); 
}); 

Пожалуйста, помогите мне

Answer 1

надеюсь, что это может помочь вам

http://jsfiddle.net/g1kvuj71/9/

transition : width 2s; 
-webkit-transition:width 2s ; 
-moz-transition:width 2s ; 
-o-transition: width 2s; 

Answer 2

Пожалуйста, проверьте этот код http://jsfiddle.net/g1kvuj71/13/

Я просто обновить свой код. Вы можете изменить положение для эффекта

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="topl" id="img"> 
 
    <img src="http://www.hollywoodreporter.com/sites/default/files/2012/12/img_logo_blue.jpg"/> 
 
</div> 
 
    <button>click me </button>