如何为所有浏览器创建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/

我刚刚更新了你的代码。您可以更改效果的位置

＆＃13;

＆＃13;

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

＆＃13;

.topl {
	position: absolute;
	z-index: 11;
	margin: 0 auto;
	left: 0;
	right: 0;
	text-align: center;
	top: 25%;
	width: 500px;
    transition : all .3s;
	-webkit-transition: all .3s;
    -ms-transition: all .3s
}
.topl img {
    width:500px;
    border:1px solid #000;    
    transition : all .3s;
	-webkit-transition: all .3s
}
.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 : all .3s;
	-webkit-transition: all .3s;
    -ms-transition: all .3s
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;