CSS3: Width and margin transition simultaneously - html

Question

I have two boxes. When clicking a button, the left box is supposed to get smaller and the right box bigger. I am aiming at having a smooth transition. When the right box gets bigger, I want a margin right to be included.
I use CSS3 transition effect. How can I achieve that for the right box the width and margin right transitions happen simultaneously and correctly?
JS Fiddle:
http://jsfiddle.net/bmzw80py/4/
My code:
HTML:
<div class="container">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
<button id="animate">Animate</button>
CSS:
.container {
width: 100%;
height: 200px;
padding: 40px 0 0 60px;
}
.box-left {
float: left;
width: 60%;
height: 100px;
background: blue;
}
.box-left-smaller {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
width: 355px;
}
.box-right {
float: right;
width: 30%;
height: 100px;
background: orange;
}
.box-right-bigger {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
-webkit-transition: margin 1s ease-in-out;
-moz-transition: margin 1s ease-in-out;
-o-transition: margin 1s ease-in-out;
transition: margin 1s ease-in-out;
width: 62%;
margin-right: 80px;
}
JS:
$('#animate').click(function() {
$('.box-left').addClass('box-left-smaller');
$('.box-right').addClass('box-right-bigger');
});

Answer 1

There's no need to trigger two different transitions: you might just change the width and the left margin of the left box by applying one class only e.g.
http://jsfiddle.net/4qwrLtuw/1/
CSS (all)
.container {
width: 100%;
height: 200px;
padding: 40px 0 0 0;
}
.box-right {
overflow: hidden;
height: 100px;
background: orange;
}
.box-left {
float: left;
width: 60%;
margin-right: 2%;
height: 100px;
background: blue;
}
.box-left-smaller {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 30%;
margin-right: 80px;
}
Result

Answer 2

You need transition margin first then width
.box-right-bigger {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 62%;
margin-right: 80px;
}
from .box-right-bigger class
Fiddle

Answer 3

Use 1 translation for both animations by using all instead of 2 declaration (one for width, one for margin):
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In your case, the first transition declaration (width) is overriden by the transition for margin...
FIDDLE : http://jsfiddle.net/bmzw80py/11/

Answer 4

Well, you might start out transitioning one or two properties, but then decide to add some others that you want transitioned. So, if the other transition-related values are the same, then it would be much easier to just have the “all” keyword in there from the start, so you don’t have to specify each property in a comma-separated list.
$('#animate').click(function() {
$('.box-left').addClass('box-left-smaller');
$('.box-right').addClass('box-right-bigger');
});
.container {
width: 100%;
height: 200px;
padding: 40px 0 0 60px;
}
.box-left {
float: left;
width: 60%;
height: 100px;
background: blue;
}
.box-left-smaller {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 30%;
}
.box-right {
float: right;
width: 30%;
height: 100px;
background: orange;
}
.box-right-bigger {
width: 62%;
margin-right: 80px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
<button id="animate">Animate</button>
Here,you find demo
https://jsfiddle.net/DhwaniSanghvi/mr1feb5f/