css - Achieve a smooth scale transition in parent and children div simultaneously -

i trying scale div , make children stays in same place while parent scales. achieve scaling parent, , children inversely:

        children-scale  parent-scale start   2               0.5           -> 2 * 0.5 = 1 middle  1.5             0.75          -> 1.5 * 0.75 = 1.125 [it should 1] end     1               1             -> 1 

as can seen in demo, initial , final values correct not intermediates. @ first thought easing function, assigning linear (constant speed) makes no difference. possibly assigning inverse easing it, asking if there non-mathematical way achieve (as not confident bezier curves).

how achieve smooth transition using transform scale property?

var $div = $('div');    $div.on('click', function() {        $div.toggleclass('scaled');    });

div {      width: 100%;      height: 200px;      overflow:hidden;  }  img {      width: auto;      height: 100%;  }  div, img {      transition: transform 1s linear;/* other easing function make no difference */  	/* transform-origin:left top; makes no difference */  }  div.scaled {  	transform:scaley(0.5);  }  div.scaled img {  	transform:scaley(2);/* 1 / 0.5 */  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <span>click image</span>  <div><img src="http://i.imgur.com/sbypaasl.jpg" alt=""></div>

jsfiddle.

---

edit:

using css animations , assigning correct values each x%, close still not perfect. (this needs know beforehand scale value or otherwise create animation , assign javascript.)

var $div = $('div');    $div.on('click', function() {        $div.toggleclass('scaled');    });

div {      width: 100%;      height: 200px;  	overflow:hidden;  }  img {      width: auto;      height: 100%;  }  div.scaled {      animation: ddiv 1s linear;  }  div.scaled img {      animation: iimg 1s linear;  }  @keyframes iimg {      0% {transform:scaley(2);}      20% {transform:scaley(1.8);}      40% {transform:scaley(1.6);}      60% {transform:scaley(1.4);}      80% {transform:scaley(1.2);}      100% {transform:scaley(1);}  }  @keyframes ddiv {      0% {transform:scaley(0.5);}      20% {transform:scaley(0.555);}/* 1 / 1.8 */      40% {transform:scaley(0.625);}/* 1 / 1.6 */      60% {transform:scaley(0.714);}/* 1 / 1.4 */      80% {transform:scaley(0.833);}/* 1 / 1.2 */      100% {transform:scaley(1);}  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <span>click image</span>  <div><img src="http://i.imgur.com/sbypaasl.jpg" alt=""></div>

would approach using pseudoelements work instead?

here's idea:

var $div = $('div');    $div.on('click', function() {      $div.toggleclass('scaled');    });

div {    width: 100%;    height: 200px;    overflow: hidden;    position: relative;  }    img {    width: auto;    height: 100%;  }    div:after,  div:before {    content: '';    position: absolute;    height: 0;    width: 100%;    display: block;    background: white;  }    div:before {    top: 0;  }    div:after {    bottom: 0;  }    div.scaled:after,  div.scaled:before {    transition: height 1s linear;  }    div.scaled:after,  div.scaled:before {    height: 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <span>click image</span>  <div><img src="http://i.imgur.com/sbypaasl.jpg" alt=""></div>